From 64d56628319c806d21c8bbabb7a18e1a8512110d Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 15 May 2023 10:57:49 +0800 Subject: [PATCH 01/52] Create `` --- .../css/color-interpolation-method/index.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/en-us/web/css/color-interpolation-method/index.md diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md new file mode 100644 index 000000000000000..c5d0d0dbd8cee58 --- /dev/null +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -0,0 +1,104 @@ +--- +title: +slug: Web/CSS/color-interpolation-method +page-type: css-type +browser-compat: + - css.types.color.color-mix + - css.types.image.gradient.conic-gradient.interpolation_color_space + - css.types.image.gradient.linear-gradient.interpolation_color_space + - css.types.image.gradient.radial-gradient.interpolation_color_space + - css.types.image.gradient.repeating-conic-gradient.interpolation_color_space + - css.types.image.gradient.repeating-linear-gradient.interpolation_color_space + - css.types.image.gradient.repeating-radial-gradient.interpolation_color_space +spec-urls: https://drafts.csswg.org/css-color/#interpolation-space +--- + +{{CSSRef}} + +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the color space used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}. + +When mixing and [combining](https://drafts.csswg.org/css-values/#combining-values) colors, the interpolation color space defaults to Oklab. + +## Syntax + +The `` data type has two syntaxes: + +``` +in +in [ ] +``` + +### Values + +- `` + - : One of the keywords `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `lab`, `oklab`, `xyz`, `xyz-d50`, and `xyz-d65`. +- `` + - : One of the keywords `hsl`, `hwb`, `lch`, and `oklch`. +- {{CSSXref("<hue-interpolation-method>")}} {{optional_inline}} + - : The algorithm for hue interpolation. It defaults to `shorter hue`. + +### Formal syntax + +{{CSSSyntax}} + +## Examples + +### Comparing interpolation color spaces using gradients + +The following example shows the effect of using different interpolation color spaces for {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}. + +#### HTML + +```html +
sRGB:
+
+
Display P3:
+
+
Oklab:
+
+
Oklch (with longer hue):
+
+``` + +#### CSS + +```css +.gradient { + background-image: linear-gradient( + var(--method) to right, + #a37, + #595 + ); + height: 40px; + width: 200px; +} +.srgb { + --method: in srgb; +} +.display-p3 { + --method: in display-p3; +} +.oklab { + --method: in oklab; +} +.oklch-longer { + --method: in oklch longer hue; +} +``` + +#### Result + +{{EmbedLiveSample("comparing_interpolation_color_spaces_using_gradients", "100%", 300)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{CSSXref("<color>")}}, {{CSSXref("<gradient>")}} +- {{CSSXref("<hue-interpolation-method>")}} From 7a42e21ff2e3d5a87bdf880ed59667bea16aad9e Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 15 May 2023 11:02:45 +0800 Subject: [PATCH 02/52] Create `` --- .../web/css/hue-interpolation-method/index.md | 166 ++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/en-us/web/css/hue-interpolation-method/index.md diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md new file mode 100644 index 000000000000000..296429dac1c666b --- /dev/null +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -0,0 +1,166 @@ +--- +title: +slug: Web/CSS/hue-interpolation-method +page-type: css-type +browser-compat: + - css.types.color.color-mix + - css.types.image.gradient.conic-gradient.hue_interpolation_method + - css.types.image.gradient.linear-gradient.hue_interpolation_method + - css.types.image.gradient.radial-gradient.hue_interpolation_method + - css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method + - css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method + - css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method +spec-urls: https://drafts.csswg.org/css-color/#hue-interpolation +--- + +{{CSSRef}} + +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. It is used as a component of the {{CSSXref("<color-interpolation-method>")}} data type. + +When mixing and [combining](https://drafts.csswg.org/css-values/#combining-values) colors, the hue interpolation algorithm defaults to [`shorter`](#values). + +## Syntax + +A `` value consists of the name of a hue interpolation algorithm followed by a literal token `hue`: + +``` +shorter hue +longer hue +increasing hue +decreasing hue +``` + +### Values + +Any pair of hue angles `θ1` and `θ2` correspond to two radii on the {{Glossary("color wheel")}}, which cut the circumference into two possible arcs for interpolation. Both arcs start at the fisrt radius and end at the second radius, but one goes clockwise and the other goes counterclockwise. + +> **Note:** The following descriptions and illustrations are based on a color wheel in which hue angles increase clockwise. Beware that there are also counterclockwise color wheels. + +There are four algorithms to determine which arc is used: + +- `shorter` + - : Use the shorter arc. When the two radii coincide, the arc degenerates to a single point. When both arcs have the same lengths: + + - If `θ1 < θ2`, use the clockwise arc; + - If `θ1 > θ2`, use the counterclockwise arc. + + Examples: + + | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = -225deg`, `θ2 = 45deg` | + | :---------------------------------------------------------------: | :----------------------------------------------------------------: | + | [shorter with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | [shorter with θ1 = -225deg and θ2 = 45deg](shorter_decreasing.png) | + +- `longer` + - : Use the longer arc. When the two radii coincide: + + - If `θ1 ≤ θ2`, the arc becomes the full circumference with a clockwise orientation. + - If `θ1 > θ2`, the arc becomes the full circumference with a counterclockwise orientation. + + When both arcs have the same lengths: + + - If `θ1 < θ2`, use the clockwise arc; + - If `θ1 > θ2`, use the counterclockwise arc. + + Examples: + + | `θ1 = 45deg`, `θ2 = -225deg` | `θ1 = 135deg`, `θ2 = 45deg` | + | :--------------------------------------------------------------: | :-------------------------------------------------------------: | + | [longer with θ1 = 45deg and θ2 = -225deg](longer_decreasing.png) | [longer with θ1 = 135deg and θ2 = 45deg](longer_increasing.png) | + +- `increasing` + - : Use the clockwise arc. When the two radii coincide: + + - If `θ1 < θ2`, the arc becomes the full circumference with a clockwise orientation. + - If `θ1 ≥ θ2`, the arc degenerates to a single point. + + Examples: + + | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 495deg`, `θ2 = 45deg` | + | :------------------------------------------------------------------: | :-----------------------------------------------------------------: | + | [increasing with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | [increasing with θ1 = 495deg and θ2 = 45deg](longer_increasing.png) | + +- `decreasing` + - : Use the counterclockwise arc. When the two radii coincide: + + - If `θ1 ≤ θ2`, the arc degenerates to a single point. + - If `θ1 > θ2`, the arc becomes the full circumference with a counterclockwise orientation. + + Examples: + + | `θ1 = 45deg`, `θ2 = 495deg` | `θ1 = 135deg`, `θ2 = 45deg` | + | :-----------------------------------------------------------------: | :------------------------------------------------------------------: | + | [decreasing with θ1 = 45deg and θ2 = 495deg](longer_decreasing.png) | [decreasing with θ1 = 135deg and θ2 = 45deg](shorter_decreasing.png) | + +### Formal syntax + +{{CSSSyntax}} + +## Examples + +### Comparing hue interpolation algorithms + +The following example shows the effect of using different hue interpolation algorithms for {{CSSXref("color_value/color-mix", "color-mix()")}}. + +#### HTML + +```html +
+
+
+
+``` + +#### CSS + +```css hidden +div { + border: 1px solid; + display: inline-block; + height: 100px; + margin: 10px; + width: 100px; +} +``` + +```css +div { + background-color: color-mix( + in hsl var(--algo) hue, + hsl(10 100% 50%), + hsl(350 100% 50%) + ); +} +/* 20 degrees */ +.shorter { + --algo: shorter; +} +/* 340 degrees */ +.longer { + --algo: longer; +} +/* 340 degrees */ +.increasing { + --algo: increasing; +} +/* 20 degrees */ +.decreasing { + --algo: decreasing; +} +``` + +#### Result + +{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 200)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{CSSXref("<color-interpolation-method>")}} +- {{CSSXref("<hue>")}} From c700aed892d73ac460b7d5455b6263049f08eb3b Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 15 May 2023 11:08:19 +0800 Subject: [PATCH 03/52] Upload diagrams --- .../longer_decreasing.png | Bin 0 -> 11900 bytes .../longer_increasing.png | Bin 0 -> 11965 bytes .../shorter_decreasing.png | Bin 0 -> 10759 bytes .../shorter_increasing.png | Bin 0 -> 10840 bytes 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 files/en-us/web/css/hue-interpolation-method/longer_decreasing.png create mode 100644 files/en-us/web/css/hue-interpolation-method/longer_increasing.png create mode 100644 files/en-us/web/css/hue-interpolation-method/shorter_decreasing.png create mode 100644 files/en-us/web/css/hue-interpolation-method/shorter_increasing.png diff --git a/files/en-us/web/css/hue-interpolation-method/longer_decreasing.png b/files/en-us/web/css/hue-interpolation-method/longer_decreasing.png new file mode 100644 index 0000000000000000000000000000000000000000..f1523d1e125ef6395fb23b8bcd665d23e40b5406 GIT binary patch literal 11900 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 MD61w@A!Qo;KPZf2jsO4v literal 0 HcmV?d00001 diff --git a/files/en-us/web/css/hue-interpolation-method/longer_increasing.png b/files/en-us/web/css/hue-interpolation-method/longer_increasing.png new file mode 100644 index 0000000000000000000000000000000000000000..92a0935c6ae43cebb4b1d8f63f2629173f8af5d7 GIT binary patch literal 11965 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 Wk477^G7oF%pbv7YvgOjI{{IioT)!*; literal 0 HcmV?d00001 diff --git a/files/en-us/web/css/hue-interpolation-method/shorter_decreasing.png b/files/en-us/web/css/hue-interpolation-method/shorter_decreasing.png new file mode 100644 index 0000000000000000000000000000000000000000..fb818f35cae783aabed574f27a78e22c317c042a GIT binary patch literal 10759 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 V`|*S8Uy~+CSzbe~QpO_W{{XswVhI2M literal 0 HcmV?d00001 diff --git a/files/en-us/web/css/hue-interpolation-method/shorter_increasing.png b/files/en-us/web/css/hue-interpolation-method/shorter_increasing.png new file mode 100644 index 0000000000000000000000000000000000000000..b54469bacb06bb9b471a6c031dfe69350e84f903 GIT binary patch literal 10840 zcmZv?XH?V86E++~K?TCCsGtx~swjepfC)_nr58b@69kbCQbS27A|g^16cs|~MIoU> z=)D(dp%ai2Ae2BL)bM-wzvn&Ar{~Mg?CjayGuL%?&+g1b=;^4kUA%D-1OlAP20q{e>5dL`d5EwqSOak~R zV6xoH%L|yo16A|Dd=;=z29zxTRb*hb3MgAUSt*bG8h3Ei1K`&8$R(;z9vpQX0aet) z-SRlU2XU^9KsN{&*9V3`CoK#>6^K6h1}LK*9>xG;Y`_$Vj;8|)psgKodO7{zz!4yW z==5INF(*JhRX_&-m}vpsiU)QofO!Bk46siEpl$#(1aJ)jpud1284s+K z0WAP%8R+c^0RT}6u$2O!m2qGYNSwz5`2eUG;Q9@)oVqdulx6^+BEWE<4@d$) zX@Eoua3LN5jg>3m%XIKwx&n9yywU@BcmU8f zfK?Cxahw{ffbw#{9dKd+K&0a%2H*@BxFiKg8Un9y7Yk){q^Zy70 z0o=Gwz#B*a0Ro)>ffcxO2hackV%0ssE8rAyg|Z%i(dGsSc=*E0q-q$b0)|V0wlbi{ zKHl?`Wc*1V?tgqwmY;I`|1sRRa|-QL+riQJ(a|Zu74rZdSimm;Q#-Zn=%{iHz|-kesv*#P9+>uirfzBn0*Sm^;Je10<{HK%N z_v!fqn0rZT#-A6wigm~>X)2wM2qn$@t{Rz^um0_BgIRUuyVZdUBqay9d3%3LSK+_> z<&%ma|D_1E|ErekVO~>md9il!(^uDNzBcJ8Pe?_sh~&#SA^Ctln`u*?A339Tchluf zb@libhx`@H)^!a19bFyWdGBpqC-1~Vyfi~HJ}GoqpnX+okMF)v1w@hUnq$s4wN}3>izyJ@4KSri!j8Gsq)4^dh~WM0Gin zO*dhAyZ+8qYKleCk~7hn-4a_EdywCXJV2s_+tC$Bl-Vng8Gm>hI$E zA(SO|U%5@WFBIXwf+oc5S_b#o6^*wMcb1vRqAPfT=L<1C&(={4De-#(v^sNG9Q(5F z!u_<)^dfX9Iog#=5ro_?e0|VN4QF?2moLQ|FH_VfZudnlk5B8(3wWqT^+2Fk_%czs zL3Mi>X$2UrVR!rPF0R{Vd|DK9ScAY3MXM}2hI6qEOjOp?>uuwtnKDzpJO&SjUxwNq z>4nzfk}337VQ=5ZIZsu$8+nk%fr|1CC}Ags`2hQkCmA&nhZ}Pj_-6R|E=(=+l*RJE zymBqqpSLB2a$`EEU`*pAkM4dx&or!v#LmrTcCvhYJmB&M<=p?F#kl(&=PPm?SwIwo zy6w0&&(B%Ke;}mD_0 zzRwi=qw=KCq+q__BuT7Im)$2(?eCIbuF@?EGxm^~%ru!hGj5eENxQ?60v8*h#yO6v z9z6%|pmSd6^~o%v9EiFGA3d}SR{ZO*5)Uxd_TdHS14$EDd;q4r(Nqe4ZGo({?P z$+Moj&vVQ~76qq%^v;O~k5uLEMzQ7%=XEX`L^8gymbl%)m$af(+Nx4wMQAQ^wp$4c zi(BuA7L{-y4f%S$o1cOD1O;X?v7kfk-mvv`%uRSk(P9>wpHsc~lHiYberjcZ)*zIg zy(@yXDK_EC&xv7NlMH*g`d&WK4UgZZynO|8p&#U?gp8!v4#Swk^TafAUPB6EWiHpH zf_UeL#1=yRSB4&;ay7T{@g)|oZ&RDx!`|1tdy|%nz@qhe6W!#QmYcc3wvDA4D%O`pS!mZ#O;fbZP(YrY_vSm z6gbE6J}?z&tKi4k=ggUi3?}rFo!vW$Sdv`d;)m@48_{WZZuosg1Ae0|tDT$m>2Z4O_0;V zrOiDkE)&kRa~UkG+ZU42@$;LP#Zb{<3<|Zm_U2!#M7F|UHMu^n5YNDl;9DqvQr6#L z0SZZfq^CzQlz}%^|GdW;(qLZCoM=Y~>Z$M--C;Wq-h1Nt;nvUtE`Ev2(b)f}sIxeq zA46=tLhH&OX*yvM!W8hY8eqP5|TJeFeP4gPhKKL@g!ZO)ir?$1Goph(Wd zen^{*z8L+${mL>bO3iO(<@w*Qs5jzD#!{KO{+|a^IG*olXuQSn1R|ej%DH*mG%v+p zuxaNw*bnj#nL+&BGtd8?|4~!!ZeZYL4b}B$HlIJC-rRDnnK;<`Jar2{YxV+`5-nD+ zM@i=K>XVc2wQ|=Yg@OO7DPHdYpuPU)GR~XOEG4+P;MlH*D)~&x*lTip%*b>^wlYmh zmBiZ5sSUmZiC3t9d}rr9Dfk$keH_)frqKGuzFlDR!2Q|0);2%Sj3jZFmt7Q-l$3(? zdR}?O0i_2stdfi#>TK8jVGdd_$f@1`YKv+6kTbFv;{Hz2qP(x$ViY`^X8}Cn(&Sd) zxwe{`Jmzpi_IqW!0h;lkRMf!otBHjxoU4z&D@oDeP*6vrJpF0Pwg5|Bck@35bY5C& z=)pkqfeQ9mD||^o2J$XR?%P_@30M`2ANv(juJ@Hl&_xR>-R57DvI81 zQ4jMptjp|G4N^LCJhxYBh6YM?N@0@;-2Yf|yBmMVC=w8LS(di>ij{yLT_wP0q1 zuX>r^$XVh&wr@vJQkUf0{$w$2`+$8&MPbEXyEN}7;0WC{d2-0qm!MaWSZ&v){myG7 zsR$HpZ5*ezh>aSwhG-nrK!0q;>(xHd9n9;_krKJqbsyiGeE$jWNcQSNiKwM?*VxlS?L|=Yq=4h((g%QOKAYx#nmes=^Qva z+;X$2Vm#m(^V(uU4eX@LGv~x9kBL`_syF;I$Gq7Kuj0bdO=Q=aeV3SPtY_ONQLnduY5loN`ZCwjOWFLv7zp zL|xa%l4mpMjks>YtO;UL#7jZoul;F1Eq;5hxWd|fU6{V~qg{eMN#`-yL6>9> zeC2}p@q-ZoV7Bd!lpDOH{hZF{Kg}9Ry_h|g2m1ju6FXWJ!z24W*DQKLq-6Rc z{<}G8_VLO0d<8*zo}M z3%b5N2j@JB1LLD((nqD5RwPUY6u8DD5vfT%d z{pVJ19cY;F-9B;W>p7O2q+4^E4af^dU~W&D$&pk!p>;MTSDm_d1L>rm=ZRMRDvG+y z@ZkEd2j_+tw|NBYBnz}#=IU$ZC2sGhx8k~_U~(UQuA1`bCxVa{!ZA{IA)$kl?{om^ zb&{Lu1JoS<+3`np|s9ynhK811bHr6$;aBYX1zf%bijjmVE&F3&~S->zTpA`8!;(=d4qpX z6`#P$yhK&uRi$T_HNCg3RXa?y!msg0)s`%~ydW|i6t{MNzZWpt@#D6e^{3VpqpqSC za^K}Q7~+GR%r^#|4Z_B-Y!3-6THv=6}2@5f-eW>i?c;D|IGBn0es>MDfQj zTDg);+qUiIScScvre8wBXL#q);GlJQGNMra=Qfxb{#K9btJGUKBhZ3(Uey-`UB}$4 ze>if9qz+M_Fi2I|W>Xen``e3md-hVzk3FOtbyvUaLjC!xSPSV%C{FC>K}fc zTCl9MZe?DYp$dH%TNK`yVh?c`I&_1CDN38Gi!byW|?zarCb=Zn6J7Uj>@vOK9% zqJ19uV}#7*`_U@Zs%+Aji4}b|W~j+_gtU>7Q{C1H>@VF*G)vvxFWZW?R`zGSbG1Vq z=8}cvOTgaoY4Wq<*hW8I8~LMTP7l$(7ihb3=O^mw4QAT6{A#of#_T99%zu5gY~QzE z-n$>t^z!>vT$8Z|E-RULVG{-j(9y zh>**X>hiMI%s-N)Y8Bff)NIVGK=R}z7)ez`X-5FQHvscJ?o!#j-gL>~+NWqjq+tLW zu|8P@N2#>%6@O1so0J zT{rNbiX{Zd9RP}n~SMi|qABsb|oAEfk?+ZOtn;hEG#=b9NCvv$m5sRG+ z+f1oq5-wi8o|3)8MvHPudz6!WU^Raj9o!`=Ami>e(wc?X^$@x%```8rbW&i+Tje_? zjrd>xO{AUuG33m8ElF`UXHkmXwx%Ky?J6{P(Vn61?KcI2vWJe`=4euWPpQk)j^vm5 zZyNXIEznJF{|&OubNQr}{DNas)RA;r9x{Jk{U8;4ys<`%iGb`+ni9z^ysbQ@28PDhTNV0#?ut{PaR9L?F*Knmv zSq34%@j@CJ!L)34rg2U*U+O#LX&wj6!%bS|xE2E8&EdI_Ru26zy`)?JOtn37)u%T9 z7608cZr`?K6DF%8ZFYz1>$xyxjbitsN}9N_qN*m`uX>-W-xL(~5}^1xA zji*?*`mkKo^lnlF6{FY82TI=U34!~HpNOuxu-2&lW6dkELYGJU0UU*k2c=pHPG|0>y?awc9sn{TMYggZH(VNcbw*-D`ZS`lJe*DpWX!XK7AL# z`v53m92{HP`tT4aOx>KDrRX~x`FWyuPdd|-!@;xJ;i*K24JCv(L!x#*2z(G zIG9&nuqhJ=J&A!ClqlCOSda5w>65);X@al!Q2M}_(~PK@`MKRW*UT)MzY`wlmcpCN zwW>P(YJ;<&K>y`I3jOHCkw&ZJWGIKk&D>1?joR*l&aC zSQOmQaO4GVxb2>5Z;6U~>kSX$y-9dpcq7}SyImm6z%nO5O{r&rRgirpEZ|Sd$TFG41N*;Wz;=G9K`J7S~T6rcW z|IGd!7WseO2PtbM^CF^*t6g0ZpK5P3c+(_aW|`G&9`$pG#JuMDviyY}tM#jO!Xu>j zTYIOUG_me}ljJ%pF82EL#~qIM7C$&Cs)}#hOd;FTADwavU&h4@-=6jg4k!a#-fNg!NubHBqD6z`{kB`w8S6fm@D;%P*EFe4=C?4o zbiU-{^zF!14QrgD&g{bR{uZtaQoU?^cP$DP_?7?DLI2eioj@N8-SQ}IB}Had6r=wd^x zk&P3MiJ0@`(O-;$ML<Nlhn<`{>MAy!B-44_dwecpJ2R~|` ziIpQ-cQ7Lw*C%u41 zk?by1(;h8B<1huSM9{I&QVoJ>fm6crJQ%uIX*w=IQJw zz{Z!ZvCI zwLkpx$_e%xiIrQXXH{1cacD#^iujHE7#s^oj@j-jZN?8O@NT|b8+J@Tez+ooh7$_l zb;$LJGODdK?Igf)Iyxz}MtYO84=IkqcavZ6td%Xkp?{s36Sv3~f#K?X4kq@9#5)z2 zl1HXmDg!wNaPSM1lioaB)+LJwLUN74z3%}Ey%uaf`Y~mJ(d{mihpc~;DSz0E+$`(6 z;%9brD0X!Toh9oq*2%Wzz|KOQsfFW-#Y6wIz{!MkQcKCNHf}-s+vbr!v-GM~xv!Wb z&1f%GDK&(ho7n}MULh-4Dq0rNgWx496J*D?)E~X<8^@iIH>nR?^w0Q0C0guzqQw;2 zinxENbC^Ds!4Jr(;o6Zn(gNj%HKF<6F%uJ1b^YZ=i}=Wq;lV~&=o#1Mjq`H7mPO4Y zqXc-iwlOp1aMSN$IK?x!g4^sr9zHhtMQ$vMPsU9Bfw>QFj?nGb=k2MF15?cERo1FJ zAUywG8TJ0DFmwHs8s*lozB_4v} zw?>AiYuz&zpR6QZ$FtDLH8VhLmso`;y(D0yw6CdJcp6A>6} zXW+@KtM@9&t>V+;_2_67@IUQsa{8$B2|TbyC(drt3kZz~2roJ=p2c!@xiLuFlV;UU z7;|thCJ%h1dzIdA9PL4UH8U(XtZH8*9QBgfMn$of?xGyg2;;(5zn4N$Yx&2;f;=*{ z)x;`+K{_}D2zDohGiz&0OE>NacvGACHmUXwcsJvEh6%qS*^3@uc8rp)2L?)f=@Sk6 z_Ir|~pFk;wKNurls^;xJCfu_gEdXw|hcXv3{z^)6vJx4#dMGO^t$^I8oY488)!5pw z($M|qH{0_Qzt+vIUUh!=o6?tXo6q9gt^Ap9+r?D3%gxrJtZFD1@tA2P;1ty;6Pg(tWX9USL=hVfz?LROn z^iD7cNs=s5Y6{l@76vjzbY~X_l#!RAu7W2UsEnbqsacA-Jl{0;Ne;O4VA1F{iKEoF zW}^58$pd-A$wEhVD7tA231M2U_bTXmHgWEqs5s+kZQx>ZfkjL^46&G6ojhy~{$oP8?P{018I}bCMO}QJ$o?IrDwd2_odZ&5P>@Zm67l zGxfQJ)6i=*uftqsW8GIxeEIm4WFiM)^NZIL@%*9Lw`C`BPMqIP;vQJ~azQCYqI;EQADw%eKoh^4fVBuNO+s)DGy6PBF1tx~L~{ zB~A;-iJN-PX1)jOZX_(prT^VjAY|EOCCxU%Y8X!Rj7L3B#D$TblMj1x{7|l}xFsLa zX-+Mdx^_FMVlRWEcq>$&7_D0SEk=38z6Nb@&AQg~;ru3SOSA1kwojt}tC_P>Civkn zn(AfWcxcUa0^gumU0zu8=(HO?ByUCr|2whjeO3(VtW=g+#&P+NR>iuZ1P0ajLsrMHxm#3YcxoyiqFAZ
;P%y2eyr``=GqEEZ+^@75zJ&!F3ED5w=E%upVE-0 z5e{d7#P&R)D0}AC=H=z#v!C<0l96wmHueR{%pc5O!z(LnFqrY)*e9cZ2~ny`%EOGi zXs&oJk!fb|DsgWoIQ}oewa9rW=3C~G|80P!3H)y4fp=J^c1`-7eyjUJk`W5=3-@cu z>hnp5Yf!#n7UnC`qO0Qqqn9%>GB~Ey`;GBZ*T~*OkegFQ7X#W#tJBldUyh}ec~v+S zMm4DZKeFHdON94q#moD5PXvi9iTDryx-Q|O^76Q443px~dR3_iO+7y%=;jeckm>-A z>+fqVzR0MNl(4UzP|^J>{I5GT=eB{#c~Pw0HjAlz;M1Gc+S@8Z8b7(-aTDKTu5TeG z0=E#K;Ky{%Q^~tI%P501o|i>ZBZ=F+N`d{dPRNKP`0-U)q}tXlTuD}u{3~CG;Z;Au zE#k9?)d19P>(}mk87;q+R!(>_EmqVZTfZmshe7~t3hxOIqVM`$p_1y)6}_8ldd8)B z^O}T7jq|v*uQ>cP6t+6@XB2Bu0mhI=ap58}w;`J%HPOV^-qn@sH)mq<)6@SoFa*j* zhI+*_)@&RM{Qhmz9)rF=zYr0xpA7R`?GdfHF@$H~6gSWO^AOeBvYx9t2YsVPa@|Gc z8p|rJXEQ62^q&Gj5+{refaETpRCeDFm?x99fb9GF6Q-hm&b9NnAqmT<*-tSPHTHd{ z(ZJG;3~#cMX}=psEP{nt!?qVZn-fs9-Voq9z?+JC7dOw>Mh-T*UL8E9i~iT}U&Aq* zWhoOEGre`1O-V9hbV&lncvyg(*SB)2W*+np@dJY}RvK<;OHtQ>me4`{y zX^Ca8YO3!1vQ&;~KFdm#HwWsHx@-aNegTeJQdeL|4)-E6Ym?jcs!dkCUUz!tc+n!C z${8DR;k<6XGBi{tnAQp>GH)71L;q1tj~GV$A2%@<^>J9LiIDvZG_&fycZ{kNiU`rK z?20VY%tUsY1#4G-%xtIx2)wg6de#g}mx4Kbk2QL+@oKXj^2ebrCF6dLX|e4Uisn9{ z!0dA1mzX+pN6+ltUG7jbP7ADc#cK;)-`Y-wqX?U~;fap)_vYjTN>rKi{>VSGDeM>3Jv}v zMH~d{#J5{-=;?1D1J`v1)t$Y>eCTJprCSX5Jy}nW-Q64f$I+^h7fTflqR5_;`Mc#X zWa@73^Uy>mI>_61h6FYUUokcm0-f*0rK zm^D%*kJT)J)<-xWK>`cjpfZRFA4jW}DFvn#F)kwb9jT>C@ex>x7z>Mg&6T8wRzfBs ztB=C>qCEo4-`?pU_=RI&LRK=PX<(cP@*R2mm*KBwzVqfKugXT|LJ3u8@;21H+AGBp ztyq5yw1G96b|Z@_U;bIr;)Xrk0Ik|m;XY?Myu+hr8?JU$_ zYSTtF1Y!v<^}#kvnAN3!8=uMsk>3_ji+W*6f4*){pCa|v^Fx*?OTfz`W@$#bkl|xv5L_l0hd)Zne9@_uw;@r3>rNB8iqY`-$D(=^o?Tdx<#Tpw`dqMz|Bb;X~E8 zO`f!SljUyXbxthBK~*;Gc5*&JuU>4Kw1)J*-@^-h^}c0MaT4tf=5zjeZF=Li<%l)p z^K}2=>0M|kSR;-qO5SubqJ};s-*Y;=opeJ&2Ca~bbQn~6Gx~;xXl3P*Zj_fP9%im?CV8;;#?k`GxHYKJa`aR0Ggf;&L zO}W|f=HOAT75!uiz!# DW&OYn literal 0 HcmV?d00001 From e4e67024f77c6874ada9959ad2244dd0f9e94c24 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 15 May 2023 11:57:27 +0800 Subject: [PATCH 04/52] Fix image link --- .../web/css/hue-interpolation-method/index.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 296429dac1c666b..166fe47f8132dc0 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -46,9 +46,9 @@ There are four algorithms to determine which arc is used: Examples: - | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = -225deg`, `θ2 = 45deg` | - | :---------------------------------------------------------------: | :----------------------------------------------------------------: | - | [shorter with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | [shorter with θ1 = -225deg and θ2 = 45deg](shorter_decreasing.png) | + | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = -225deg`, `θ2 = 45deg` | + | ------------------------------------------------------------------ | ------------------------------------------------------------------- | + | ![shorter with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![shorter with θ1 = -225deg and θ2 = 45deg](shorter_decreasing.png) | - `longer` - : Use the longer arc. When the two radii coincide: @@ -63,9 +63,9 @@ There are four algorithms to determine which arc is used: Examples: - | `θ1 = 45deg`, `θ2 = -225deg` | `θ1 = 135deg`, `θ2 = 45deg` | - | :--------------------------------------------------------------: | :-------------------------------------------------------------: | - | [longer with θ1 = 45deg and θ2 = -225deg](longer_decreasing.png) | [longer with θ1 = 135deg and θ2 = 45deg](longer_increasing.png) | + | `θ1 = 45deg`, `θ2 = -225deg` | `θ1 = 135deg`, `θ2 = 45deg` | + | ----------------------------------------------------------------- | ---------------------------------------------------------------- | + | ![longer with θ1 = 45deg and θ2 = -225deg](longer_decreasing.png) | ![longer with θ1 = 135deg and θ2 = 45deg](longer_increasing.png) | - `increasing` - : Use the clockwise arc. When the two radii coincide: @@ -75,9 +75,9 @@ There are four algorithms to determine which arc is used: Examples: - | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 495deg`, `θ2 = 45deg` | - | :------------------------------------------------------------------: | :-----------------------------------------------------------------: | - | [increasing with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | [increasing with θ1 = 495deg and θ2 = 45deg](longer_increasing.png) | + | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 495deg`, `θ2 = 45deg` | + | --------------------------------------------------------------------- | -------------------------------------------------------------------- | + | ![increasing with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![increasing with θ1 = 495deg and θ2 = 45deg](longer_increasing.png) | - `decreasing` - : Use the counterclockwise arc. When the two radii coincide: @@ -87,9 +87,9 @@ There are four algorithms to determine which arc is used: Examples: - | `θ1 = 45deg`, `θ2 = 495deg` | `θ1 = 135deg`, `θ2 = 45deg` | - | :-----------------------------------------------------------------: | :------------------------------------------------------------------: | - | [decreasing with θ1 = 45deg and θ2 = 495deg](longer_decreasing.png) | [decreasing with θ1 = 135deg and θ2 = 45deg](shorter_decreasing.png) | + | `θ1 = 45deg`, `θ2 = 495deg` | `θ1 = 135deg`, `θ2 = 45deg` | + | -------------------------------------------------------------------- | --------------------------------------------------------------------- | + | ![decreasing with θ1 = 45deg and θ2 = 495deg](longer_decreasing.png) | ![decreasing with θ1 = 135deg and θ2 = 45deg](shorter_decreasing.png) | ### Formal syntax From 0ccc5d10e187f56be61f617098b4cccee8947a50 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 01:03:34 +0800 Subject: [PATCH 05/52] Tentative linting fix --- files/en-us/web/css/color-interpolation-method/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index c5d0d0dbd8cee58..ea0aafe8d60619b 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -31,10 +31,15 @@ in [ ] ### Values - `` + - : One of the keywords `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `lab`, `oklab`, `xyz`, `xyz-d50`, and `xyz-d65`. + - `` + - : One of the keywords `hsl`, `hwb`, `lch`, and `oklch`. + - {{CSSXref("<hue-interpolation-method>")}} {{optional_inline}} + - : The algorithm for hue interpolation. It defaults to `shorter hue`. ### Formal syntax From 43b180d1247f8d320dbbeb0fbc8e22a7376d4f6a Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 10:11:30 +0800 Subject: [PATCH 06/52] Linting --- files/en-us/web/css/color-interpolation-method/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index ea0aafe8d60619b..5d2865e2972e9c6 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -69,11 +69,7 @@ The following example shows the effect of using different interpolation color sp ```css .gradient { - background-image: linear-gradient( - var(--method) to right, - #a37, - #595 - ); + background-image: linear-gradient(var(--method) to right, #a37, #595); height: 40px; width: 200px; } From f2ce649332c3e45ae4e1dc0a5d5ba8b70b0be5b2 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 10:13:33 +0800 Subject: [PATCH 07/52] Linting --- files/en-us/web/css/hue-interpolation-method/index.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 166fe47f8132dc0..b33b8475625a936 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -124,11 +124,7 @@ div { ```css div { - background-color: color-mix( - in hsl var(--algo) hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); + background-color: color-mix(in hsl var(--algo) hue, hsl(10 100% 50%), hsl(350 100% 50%)); } /* 20 degrees */ .shorter { From 3b3a3ea121059b8c733e339fc974b34f19ffbd86 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 10:33:13 +0800 Subject: [PATCH 08/52] Linting --- .../web/css/hue-interpolation-method/index.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index b33b8475625a936..f78a5f29424c66f 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -39,6 +39,7 @@ Any pair of hue angles `θ1` and `θ2` correspond to two radii on the {{Glossary There are four algorithms to determine which arc is used: - `shorter` + - : Use the shorter arc. When the two radii coincide, the arc degenerates to a single point. When both arcs have the same lengths: - If `θ1 < θ2`, use the clockwise arc; @@ -51,6 +52,7 @@ There are four algorithms to determine which arc is used: | ![shorter with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![shorter with θ1 = -225deg and θ2 = 45deg](shorter_decreasing.png) | - `longer` + - : Use the longer arc. When the two radii coincide: - If `θ1 ≤ θ2`, the arc becomes the full circumference with a clockwise orientation. @@ -68,6 +70,7 @@ There are four algorithms to determine which arc is used: | ![longer with θ1 = 45deg and θ2 = -225deg](longer_decreasing.png) | ![longer with θ1 = 135deg and θ2 = 45deg](longer_increasing.png) | - `increasing` + - : Use the clockwise arc. When the two radii coincide: - If `θ1 < θ2`, the arc becomes the full circumference with a clockwise orientation. @@ -80,6 +83,7 @@ There are four algorithms to determine which arc is used: | ![increasing with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![increasing with θ1 = 495deg and θ2 = 45deg](longer_increasing.png) | - `decreasing` + - : Use the counterclockwise arc. When the two radii coincide: - If `θ1 ≤ θ2`, the arc degenerates to a single point. @@ -124,20 +128,28 @@ div { ```css div { - background-color: color-mix(in hsl var(--algo) hue, hsl(10 100% 50%), hsl(350 100% 50%)); + background-color: color-mix( + in hsl var(--algo) hue, + hsl(10 100% 50%), + hsl(350 100% 50%) + ); } + /* 20 degrees */ .shorter { --algo: shorter; } + /* 340 degrees */ .longer { --algo: longer; } + /* 340 degrees */ .increasing { --algo: increasing; } + /* 20 degrees */ .decreasing { --algo: decreasing; From 3c8f7f5d5e19489909b8b4f1be8904a50f35f32c Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 14:08:48 +0800 Subject: [PATCH 09/52] Replace example for `` --- .../web/css/hue-interpolation-method/index.md | 80 ++++++++++++------- 1 file changed, 52 insertions(+), 28 deletions(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index f78a5f29424c66f..39687458e8e0d35 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -108,51 +108,75 @@ The following example shows the effect of using different hue interpolation algo #### HTML ```html -
-
-
-
+
+

HSL

+
+
+

HSL named

+
+
+

HSL increasing

+
+
+

HSL decreasing

+
+
+

HSL longer

+
+
+

HSL named (longer)

+
``` #### CSS ```css hidden div { - border: 1px solid; - display: inline-block; + border: 1px solid black; height: 100px; margin: 10px; - width: 100px; + width: 90%; +} +p { + color: white; + margin: 6px; } ``` ```css -div { - background-color: color-mix( - in hsl var(--algo) hue, - hsl(10 100% 50%), - hsl(350 100% 50%) +.hsl { + background: linear-gradient( + to right in hsl, + hsl(39deg 100% 50%), + hsl(60deg 100% 50%) ); } - -/* 20 degrees */ -.shorter { - --algo: shorter; +.hsl-increasing { + background: linear-gradient( + to right in hsl increasing hue, + hsl(190deg 100% 50%), + hsl(180deg 100% 50%) + ); } - -/* 340 degrees */ -.longer { - --algo: longer; +.hsl-decreasing { + background: linear-gradient( + to right in hsl decreasing hue, + hsl(39deg 100% 50%), + hsl(60deg 100% 50%) + ); } - -/* 340 degrees */ -.increasing { - --algo: increasing; +.hsl-longer { + background: linear-gradient( + to right in hsl longer hue, + hsl(39deg 100% 50%), + hsl(60deg 100% 50%) + ); } - -/* 20 degrees */ -.decreasing { - --algo: decreasing; +.hsl-named { + background: linear-gradient(to right in hsl, orange, yellow); +} +.hsl-named-longer { + background: linear-gradient(to right in hsl longer hue, orange, yellow); } ``` From 0233bcb83f6ae30eb0cfc0d06bb2dc223a0554b6 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 14:12:26 +0800 Subject: [PATCH 10/52] Wording --- files/en-us/web/css/hue-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 39687458e8e0d35..0df02f3bc515aa8 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -34,7 +34,7 @@ decreasing hue Any pair of hue angles `θ1` and `θ2` correspond to two radii on the {{Glossary("color wheel")}}, which cut the circumference into two possible arcs for interpolation. Both arcs start at the fisrt radius and end at the second radius, but one goes clockwise and the other goes counterclockwise. -> **Note:** The following descriptions and illustrations are based on a color wheel in which hue angles increase clockwise. Beware that there are also counterclockwise color wheels. +> **Note:** The following descriptions and illustrations are based on color wheels in which hue angles increase clockwise. Beware that there are also counterclockwise color wheels. There are four algorithms to determine which arc is used: From e1410af06218fa1eca0098fe3644b7961000b5e5 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sun, 21 May 2023 14:20:11 +0800 Subject: [PATCH 11/52] Use larger height for example --- files/en-us/web/css/hue-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 0df02f3bc515aa8..5b5fa270f768df9 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -182,7 +182,7 @@ p { #### Result -{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 200)}} +{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 750)}} ## Specifications From b8341d51d27f48c55bdc0ccd5e7488c007e13549 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 17:44:46 +0800 Subject: [PATCH 12/52] Update `` --- files/en-us/web/css/hue/index.md | 147 ++++++++++++++----------------- 1 file changed, 68 insertions(+), 79 deletions(-) diff --git a/files/en-us/web/css/hue/index.md b/files/en-us/web/css/hue/index.md index 2d78db71622e747..7da135afbc66676 100644 --- a/files/en-us/web/css/hue/index.md +++ b/files/en-us/web/css/hue/index.md @@ -8,40 +8,80 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-hue {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{cssxref("<number>")}} or an {{cssxref("<angle>")}} specifying a hue angle (a cylindrical polar color) in degrees of a full circle. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the hue angle of a color. It is used in the color functions that accept hue expressed as a single value, specifically [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), [`lch()`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch()`](/en-US/docs/Web/CSS/color_value/oklch) functional notations. -> **Note:** The angles corresponding to particular hues depend on the color space. For example, green in [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), which use the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space, is at `120deg`. In [`lch()`](/en-US/docs/Web/CSS/color_value/lch), which uses the CIELAB color wheel, green is at `134.39deg`. - -![A sRGB color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors](hue-wheel.png) - -In the sRGB color space, for [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), _red_ is `0deg`, _yellow_ is `60deg`, _green_ is `120deg`, _cyan_ is `180deg`, _blue_ is `240deg`, and _magenta_ is `300deg`. +![An sRGB color wheel](color_wheel.svg) + +The color wheel above shows hues at all angles in the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space. In particular, _red_ is at `0deg`, _yellow_ is at `60deg`, _lime_ is at `120deg`, _cyan_ is at `180deg`, _blue_ is at `240deg`, and _magenta_ is at `300deg`. + +> **Note:** The angles corresponding to particular hues depend on the color space. For example, the hue angle of sRGB green is `120deg` in the sRGB color space, but `134.39deg` in the CIELAB color space. + +The following table lists typical colors at various angles in the sRGB (used by {{CSSXref("color_value/hsl", "hsl()")}} and {{CSSXref("color_value/hwb", "hwb()")}}), CIELAB (used by {{CSSXref("color_value/lch", "lch()")}}), and Oklab (used by {{CSSXref("color_value/oklch", "oklch()")}}) color spaces: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
0°60°120°180°240°300°
sRGB
CIELAB
Oklab
## Syntax -```css -/* hsl( ) */ -hsl(270 100% 50%); -hsl(270deg 100% 50%); -hsl(300grad 100% 50%); -hsl(0.75turn 100% 50%); -hsl(4.71rad 100% 50%); - -/* hwb( ) */ -hwb(270 0% 0%); -/* lch( ) */ -lch(39.35 121.2% -51.94%); -/* … */ -``` +A `` value can be either an `` or a ``. ### Values -- `` - - : An {{cssxref("<angle>")}} values expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively. -- `` - - : An integer or floating point number, representing degrees of the hue angle. +- {{CSSXref("<angle>")}} + - : An angle expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively. +- {{CSSXref("<number>")}} + - : A real number, representing degrees of the hue angle. + +As an `` is periodic, `` is normalized to the range `[0deg, 360deg]`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on. -As an `` is periodic, normalized to the range of `0deg` to `360deg`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on. +### Interpolation + +`` values are interpolated as {{CSSXref("<angle>")}} values, and the default interpolation algorithm is [`shorter`](https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method#values). In some color-related CSS functions, this can be overriden by the {{CSSXref("<hue-interpolation-method>")}} component. ### Formal syntax @@ -102,7 +142,7 @@ hue.addEventListener("input", () => { #### Result -{{EmbedLiveSample("Changing the hue of a color using a slider", "100%", "200")}} +{{EmbedLiveSample("changing_the_hue_of_a_color_using_a_slider", "100%", "200")}} ### Approximating red hues in different color spaces @@ -152,59 +192,7 @@ div { #### Result -{{EmbedLiveSample("Approximating red hues in different color spaces", "100%", "150")}} - -### Interpolating hue values - -The [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) functional notation can be used to interpolate the hue of two colors. -Four methods are available for interpolating the hue value: `shorter`, `longer`, `increasing`, and `decreasing`. -The `shorter` method is the default for interpolation and the result will be the shortest distance between the two angles in degrees. -Conversely, `longer` uses the larger value between the two hue angles. - -> **Note:** For more information on using this functional notation, see the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) reference. - -#### HTML - -```html -
-
-``` - -#### CSS - -```css hidden -div { - width: 100px; - height: 100px; - margin: 10px; - border: 1px solid; - display: inline-block; -} -``` - -```css -/* 20 degrees */ -#shorter { - background-color: color-mix( - in hsl shorter hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} - -/* 340 degrees */ -#longer { - background-color: color-mix( - in hsl longer hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} -``` - -#### Result - -{{EmbedLiveSample('Interpolating hue values', '100%', '200')}} +{{EmbedLiveSample("approximating_red_hues_in_different_color_spaces", "100%", "150")}} ## Specifications @@ -217,3 +205,4 @@ div { ## See also - [``](/en-US/docs/Web/CSS/color_value) +- {{CSSXref("<hue-interpolation-method>")}} From b1fc497807f1ca28738918cc59d8b6a88a2bf983 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 17:45:33 +0800 Subject: [PATCH 13/52] Create color_wheel.svg --- files/en-us/web/css/hue/color_wheel.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 files/en-us/web/css/hue/color_wheel.svg diff --git a/files/en-us/web/css/hue/color_wheel.svg b/files/en-us/web/css/hue/color_wheel.svg new file mode 100644 index 000000000000000..4f43dd675e5980f --- /dev/null +++ b/files/en-us/web/css/hue/color_wheel.svg @@ -0,0 +1 @@ +
0°60°120°180°240°300° From 88916e81d55c0b66fc1ba5e27b5fc3d18c54a024 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 19:18:08 +0800 Subject: [PATCH 14/52] Fix linting --- files/en-us/web/css/hue/index.md | 78 +++++++++++++++++++++++--------- 1 file changed, 57 insertions(+), 21 deletions(-) diff --git a/files/en-us/web/css/hue/index.md b/files/en-us/web/css/hue/index.md index 7da135afbc66676..76be90200891794 100644 --- a/files/en-us/web/css/hue/index.md +++ b/files/en-us/web/css/hue/index.md @@ -38,50 +38,86 @@ The following table lists typical colors at various angles in the sRGB (used by sRGB - - - - - - + + + + + + CIELAB - - - - - - + + + + + + Oklab - - - - - - + + + + + + ## Syntax -A `` value can be either an `` or a ``. +A `` can be either an `` or a ``. ### Values - {{CSSXref("<angle>")}} - : An angle expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively. -- {{CSSXref("<number>")}} +- `` - : A real number, representing degrees of the hue angle. As an `` is periodic, `` is normalized to the range `[0deg, 360deg]`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on. ### Interpolation -`` values are interpolated as {{CSSXref("<angle>")}} values, and the default interpolation algorithm is [`shorter`](https://developer.mozilla.org/en-US/docs/Web/CSS/hue-interpolation-method#values). In some color-related CSS functions, this can be overriden by the {{CSSXref("<hue-interpolation-method>")}} component. +`` values are interpolated as {{CSSXref("<angle>")}} values, and the default interpolation algorithm is [`shorter`](/en-US/docs/Web/CSS/hue-interpolation-method#values). In some color-related CSS functions, this can be overriden by the {{CSSXref("<hue-interpolation-method>")}} component. ### Formal syntax From ef5054eb128be004ebb18823f81e09e8ea957334 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 20:35:12 +0800 Subject: [PATCH 15/52] Simplify wording --- files/en-us/web/css/color-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 5d2865e2972e9c6..12266a95f62232a 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -17,7 +17,7 @@ spec-urls: https://drafts.csswg.org/css-color/#interpolation-space The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the color space used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}. -When mixing and [combining](https://drafts.csswg.org/css-values/#combining-values) colors, the interpolation color space defaults to Oklab. +When interpolating `` values, the interpolation color space defaults to Oklab. ## Syntax From 7a57c3d6259be61aa16119600d51a1c0ff3df516 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 20:35:18 +0800 Subject: [PATCH 16/52] Simplify wording --- files/en-us/web/css/hue-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 5b5fa270f768df9..1087c2bc991d6b2 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -17,7 +17,7 @@ spec-urls: https://drafts.csswg.org/css-color/#hue-interpolation The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. It is used as a component of the {{CSSXref("<color-interpolation-method>")}} data type. -When mixing and [combining](https://drafts.csswg.org/css-values/#combining-values) colors, the hue interpolation algorithm defaults to [`shorter`](#values). +When interpolating `` values, the hue interpolation algorithm defaults to [`shorter`](#values). ## Syntax From 4dd7036d17dde37fbd2b81ca920f18633afdc8c9 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 20:44:42 +0800 Subject: [PATCH 17/52] Simplify syntax of `color-mix()` --- .../web/css/color_value/color-mix/index.md | 30 ++++--------------- 1 file changed, 6 insertions(+), 24 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index deb275469a449d9..8bde1315088e7dc 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -20,32 +20,13 @@ color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white); ### Values -Functional notation: `color-mix(in colorspace[ hue-interpolation-method hue], color[ p1], color[ p2])` - -- `in` - - - : A literal token as a component of the syntax. - -- `colorspace` - - - : One of `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`, `hsl`, `hwb`, `lch`, or `oklch`, specifying the color space for interpolation. - -- `hue-interpolation-method` {{optional_inline}} - - - : One of `shorter`, `longer`, `increasing`, or `decreasing`, specifying how {{CSSXref("<hue>")}} values of the colors are interpolated. - - > **Note:** This value is only valid if `colorspace` is one of `hsl`, `hwb`, `lch`, and `oklch`. - -- `hue` - - - : A literal token as a component of the syntax. - -- `color` - - - : Any valid {{CSSXref("<color>")}}. +Functional notation: `color-mix(method, color1[ p1], color2[ p2])` +- `method` + - : A {{CSSXref("<color-interpolation-method>")}} specifying the interpolation color space. +- `color1`, `color2` + - : {{CSSXref("<color>")}} values to mix. - `p1`, `p2` {{optional_inline}} - - : {{CSSXref("<percentage>")}} values between `0%` and `100%`, specifying the amount of each color to mix. They are normalized as follows: - If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`. @@ -210,4 +191,5 @@ div { ## See also - {{cssxref("color_value")}} +- {{CSSXref("<color-interpolation-method>")}} - {{cssxref("<hue>")}} From 6cf77187e580415adc69b23c713cd1aa20863bb9 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 20:52:00 +0800 Subject: [PATCH 18/52] Relocate `` example --- .../web/css/color_value/color-mix/index.md | 74 +------------------ 1 file changed, 2 insertions(+), 72 deletions(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index 8bde1315088e7dc..c76f62f645bcdaa 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.color.color-mix {{CSSRef}} -The **`color-mix()`** functional notation takes two {{cssxref("color_value","<color>")}} values and returns the result of mixing them in a given colorspace by a given amount. +The **`color-mix()`** functional notation takes two {{cssxref("<color>")}} values and returns the result of mixing them in a given colorspace by a given amount. ## Syntax @@ -108,77 +108,7 @@ li:nth-child(6) { #### Result -{{EmbedLiveSample('Mixing two colors','100%', 150)}} - -### Using hue interpolation methods - -Hue interpolation methods can be used to control how the {{cssxref("<hue>")}} is interpolated between two colors. -For `shorter` the result will be the shortest distance between the two angles (the default) and conversely, `longer` uses the larger value between the two angles in a circle. - -For `increasing`, the result will be the angle between 0 and 360 degrees and for `decreasing` the result will be the angle between -360 and 0 degrees. - -#### HTML - -```html -
shorter
-
longer
-
increasing
-
decreasing
-``` - -#### CSS - -```css hidden -div { - width: 100px; - height: 100px; - margin: 10px; - border: 1px solid; - display: inline-block; -} -``` - -```css -/* 20 degrees */ -#shorter { - background-color: color-mix( - in hsl shorter hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} - -/* 340 degrees */ -#longer { - background-color: color-mix( - in hsl longer hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} - -/* The resulting angle is between 0 and 360 degrees */ -#increasing { - background-color: color-mix( - in hsl increasing hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} - -/* The resulting angle is between -360 and 0 degrees */ -#decreasing { - background-color: color-mix( - in hsl decreasing hue, - hsl(10 100% 50%), - hsl(350 100% 50%) - ); -} -``` - -#### Result - -{{EmbedLiveSample('Using hue interpolation methods','100%', 150)}} +{{EmbedLiveSample("mixing_two_colors", "100%", 150)}} ## Specifications From c0476f44ec9632f559d3b0afa3b34ebe7b9ed81b Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 21:16:05 +0800 Subject: [PATCH 19/52] Fix linting --- files/en-us/web/css/color_value/color-mix/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index c76f62f645bcdaa..0dc1c4f0a68a101 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -23,10 +23,15 @@ color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white); Functional notation: `color-mix(method, color1[ p1], color2[ p2])` - `method` + - : A {{CSSXref("<color-interpolation-method>")}} specifying the interpolation color space. + - `color1`, `color2` + - : {{CSSXref("<color>")}} values to mix. + - `p1`, `p2` {{optional_inline}} + - : {{CSSXref("<percentage>")}} values between `0%` and `100%`, specifying the amount of each color to mix. They are normalized as follows: - If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`. From 19e46f3e89e8da9010e4c3d914db69e74f8c76bd Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 21:23:27 +0800 Subject: [PATCH 20/52] De-duplicate `` from `hsl()` --- files/en-us/web/css/color_value/hsl/index.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md index 8ada76e69bda7c6..9b17ca766c943c8 100644 --- a/files/en-us/web/css/color_value/hsl/index.md +++ b/files/en-us/web/css/color_value/hsl/index.md @@ -13,7 +13,7 @@ The **`hsl()`** functional notation expresses an {{glossary("RGB", "sRGB")}} col {{EmbedInteractiveExample("pages/css/function-hsl.html")}} -Defining _complementary colors_ with `hsl()` can be done with a single formula, as they are positioned on the same diameter of the {{glossary("color wheel")}}. If `theta` is the angle of a color, its complementary one will have `180deg-theta` as its _hue_ coordinate. +Defining _complementary colors_ with `hsl()` can be done with a single formula, as they are positioned on the same diameter of the {{glossary("color wheel")}}. If `θ` is the hue angle of a color, its complementary one will have `180deg - θ` as its hue angle. ## Syntax @@ -29,19 +29,12 @@ The function also accepts a legacy syntax in which all values are separated with Functional notation: `hsl(H S L[ / A])` - `H` - - - : An {{cssxref("<angle>")}} of the {{glossary("color wheel")}} given in one of the following units: `deg`, `rad`, `grad`, or `turn`. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees. By definition, _red_ is `0deg`, with the other colors spread around the circle, so _green_ is `120deg`, _blue_ is `240deg`, etc. As an `` is periodic, it implicitly wraps around such that `-120deg` = `240deg`, `480deg` = `120deg`, `-1turn` = `1turn`, and so on. This color wheel helps finding the angle associated with a color: ![A color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors](hue-wheel.png) - + - : A {{CSSXref("<hue>")}} representing the hue angle. - `S` - - : A {{CSSXref("<percentage>")}} representing saturation, where `100%` is completely saturated, while `0%` is completely unsaturated (gray). - - `L` - - : A {{CSSXref("<percentage>")}} representing lightness, where `100%` is white, `0%` is black, and `50%` is "normal". - - `A` {{optional_inline}} - - : An {{CSSXref("<alpha-value>")}}, where the number `1` corresponds to `100%` (full opacity). ### Formal syntax @@ -50,7 +43,7 @@ Functional notation: `hsl(H S L[ / A])` ## Examples -### Using `hsl()` with `conic-gradient()` +### Using hsl() with conic-gradient() The `hsl()` function works well with [`conic-gradient()`](/en-US/docs/Web/CSS/gradient/conic-gradient) as both deal with angles. @@ -81,7 +74,7 @@ div { #### Result -{{EmbedLiveSample('Using hsl() with conic-gradient(), ', '100%', '140px')}} +{{EmbedLiveSample("using_hsl_with_conic-gradient", "100%", "140px")}} ### Legacy syntax: comma-separated values @@ -114,7 +107,7 @@ div.comma-separated { #### Result -{{EmbedLiveSample('Legacy syntax: comma-separated values', '100%', '150px')}} +{{EmbedLiveSample("legacy_syntax_comma-separated_values", "100%", "150px")}} ### Legacy syntax: hsla() @@ -147,7 +140,7 @@ div.hsla { #### Result -{{EmbedLiveSample('Legacy syntax: hsla()', '100%', '150px')}} +{{EmbedLiveSample("legacy_syntax_hsla", "100%", "150px")}} ## Specifications From 3f4bfaa2012d29f2ee5d7e13339a041cc027c052 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 21:24:05 +0800 Subject: [PATCH 21/52] Delete hue-wheel.png --- .../en-us/web/css/color_value/hsl/hue-wheel.png | Bin 15823 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 files/en-us/web/css/color_value/hsl/hue-wheel.png diff --git a/files/en-us/web/css/color_value/hsl/hue-wheel.png b/files/en-us/web/css/color_value/hsl/hue-wheel.png deleted file mode 100644 index 5f2d7eda77bc944ddbec80a32134b69f70de0d45..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15823 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 From 90e406ad1526bd133f3b00a34c2d131b9f526809 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 22:18:56 +0800 Subject: [PATCH 22/52] De-duplicate `` from `hwb()` --- files/en-us/web/css/color_value/hwb/index.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/color_value/hwb/index.md b/files/en-us/web/css/color_value/hwb/index.md index cd02b9beefdca72..dda8101bef5ed1d 100644 --- a/files/en-us/web/css/color_value/hwb/index.md +++ b/files/en-us/web/css/color_value/hwb/index.md @@ -24,7 +24,7 @@ Functional notation: `hwb(H W B[ / A])` - `H` - - : An {{cssxref("<angle>")}} of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in the [CSS Color](https://drafts.csswg.org/css-color/#typedef-hue) specification. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in the [CSS Color Level 3](https://drafts.csswg.org/css-color-3/#hsl-color) specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an ``, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. + - : A {{CSSXref("<hue>")}} representing the hue angle. - `W`, `B` @@ -47,3 +47,7 @@ Functional notation: `hwb(H W B[ / A])` ## Browser compatibility {{Compat}} + +## See also + +- The {{CSSXref("<color>")}} data type for a list of all color notations From 0f131103cbc51bdcf9475044414bf0d0f1c1f60e Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 22:24:51 +0800 Subject: [PATCH 23/52] De-duplicate `` from `lch()` --- files/en-us/web/css/color_value/lch/index.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/files/en-us/web/css/color_value/lch/index.md b/files/en-us/web/css/color_value/lch/index.md index 47b1f4e37c4a8a7..55d46e0957b0df5 100644 --- a/files/en-us/web/css/color_value/lch/index.md +++ b/files/en-us/web/css/color_value/lch/index.md @@ -22,19 +22,12 @@ lch(52.2345% 72.2 56.2 / .5); Functional notation: `lch(L C H[ / A])` - `L` - - : A {{CSSXref("<number>")}} between `0` and `100` or a {{CSSXref("<percentage>")}} between `0%` and `100%` that specifies the CIE Lightness where the number `0` corresponds to `0%` (black) and the number `100` corresponds to `100%` (white). - - `C` - - : A {{CSSXref("<number>")}} or a {{CSSXref("<percentage>")}} where `0%` is `0` and `100%` is the number `150`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`). - - `H` - - - : A {{cssxref("<number>")}} or a {{cssxref("<angle>")}} that specifies the hue angle along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue). - + - : A {{CSSXref("<hue>")}} representing the hue angle. - `A` {{optional_inline}} - - : An {{CSSXref("<alpha-value>")}}, where the number `1` corresponds to `100%` (full opacity). > **Note:** Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. From 95f4f26f29c336e5ec0a4105df448d4198e92a56 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 22:28:17 +0800 Subject: [PATCH 24/52] De-duplicate `` from `oklch()` --- files/en-us/web/css/color_value/oklch/index.md | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/files/en-us/web/css/color_value/oklch/index.md b/files/en-us/web/css/color_value/oklch/index.md index 92886febead05af..f11609f830c4267 100644 --- a/files/en-us/web/css/color_value/oklch/index.md +++ b/files/en-us/web/css/color_value/oklch/index.md @@ -22,19 +22,12 @@ oklch(59.69% 0.156 49.77 / .5) Functional notation: `oklch(L C H[ / A])` - `L` - - : A {{CSSXref("<number>")}} between `0` and `1` or a {{CSSXref("<percentage>")}} between `0%` and `100%`, where the number `0` corresponds to `0%` (black) and the number `1` corresponds to `100%` (white). `L` specifies the perceived lightness. - - `C` - - : A {{CSSXref("<number>")}} or a {{CSSXref("<percentage>")}}, where `0%` is `0` and `100%` is the number `0.4`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while the maximum is theoretically unbounded (but in practice does not exceed `0.5`). - - `H` - - - : A {{cssxref("<number>")}} or a {{cssxref("<angle>")}} that specifies the hue angle along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue). - + - : A {{CSSXref("<hue>")}} representing the hue angle.. - `A` {{optional_inline}} - - : An {{CSSXref("<alpha-value>")}}, where the number `1` corresponds to `100%` (full opacity). ### Formal syntax From 43a1f3fb0c5b5699d8243685522728eaa4eaaf3b Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 22:28:56 +0800 Subject: [PATCH 25/52] Delete hue-wheel.png --- files/en-us/web/css/hue/hue-wheel.png | Bin 15823 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 files/en-us/web/css/hue/hue-wheel.png diff --git a/files/en-us/web/css/hue/hue-wheel.png b/files/en-us/web/css/hue/hue-wheel.png deleted file mode 100644 index 5f2d7eda77bc944ddbec80a32134b69f70de0d45..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15823 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 From 7105583a03ba9766b078afd86076be1daa1b63a6 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Wed, 24 May 2023 22:44:40 +0800 Subject: [PATCH 26/52] Fine-tune `` --- files/en-us/web/css/hue-interpolation-method/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 1087c2bc991d6b2..ffede4116610060 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -111,9 +111,6 @@ The following example shows the effect of using different hue interpolation algo

HSL

-
-

HSL named

-

HSL increasing

@@ -123,6 +120,9 @@ The following example shows the effect of using different hue interpolation algo

HSL longer

+
+

HSL named

+

HSL named (longer)

@@ -133,7 +133,7 @@ The following example shows the effect of using different hue interpolation algo ```css hidden div { border: 1px solid black; - height: 100px; + height: 50px; margin: 10px; width: 90%; } @@ -182,7 +182,7 @@ p { #### Result -{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 750)}} +{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 500)}} ## Specifications From f76effab2a896ef8fc50eb293546fd0d9288b05a Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 12:15:27 +0800 Subject: [PATCH 27/52] Remove Level 5 content from `color()` --- files/en-us/web/css/color_value/color/index.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/color_value/color/index.md b/files/en-us/web/css/color_value/color/index.md index 1110005e4370335..eae1f61251ee08d 100644 --- a/files/en-us/web/css/color_value/color/index.md +++ b/files/en-us/web/css/color_value/color/index.md @@ -11,8 +11,6 @@ The **`color()`** functional notation allows a color to be specified in a partic Support for a particular colorspace can be detected with the [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) CSS media feature. -The [`@color-profile`](/en-US/docs/Web/CSS/@color-profile) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to define and name a color profile to be used in the `color()` function to specify a color. - ## Syntax ```css @@ -93,11 +91,11 @@ div { #### Result -{{EmbedLiveSample('Using_predefined_colorspaces_with_color')}} +{{EmbedLiveSample("using_predefined_colorspaces_with_color")}} -### Using xyz colorspaces with color() +### Using the xyz colorspace with color() -The following example shows how to use `xyz` colorspaces to specify a color. +The following example shows how to use the `xyz` colorspace to specify a color. #### HTML @@ -136,7 +134,7 @@ div { #### Result -{{EmbedLiveSample('Using_xyz_colorspaces_with_color')}} +{{EmbedLiveSample("using_the_xyz_colorspace_with_color")}} ### Using color-gamut media queries with color() @@ -185,7 +183,7 @@ div { #### Result -{{EmbedLiveSample('Using_color-gamut_media_queries_with_color')}} +{{EmbedLiveSample("using_color-gamut_media_queries_with_color")}} ## Specifications From fd7c89587fdc65b4678187dfca72e69249937151 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 12:18:54 +0800 Subject: [PATCH 28/52] Uplift "Formal syntax" level --- files/en-us/web/css/color-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 12266a95f62232a..222e2ba0dd1cb43 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -42,7 +42,7 @@ in [ ] - : The algorithm for hue interpolation. It defaults to `shorter hue`. -### Formal syntax +## Formal syntax {{CSSSyntax}} From 20cde556c788ff66262c863855da48e27884d830 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 12:18:59 +0800 Subject: [PATCH 29/52] Uplift "Formal syntax" level --- files/en-us/web/css/hue-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index ffede4116610060..744ac282ddf173e 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -95,7 +95,7 @@ There are four algorithms to determine which arc is used: | -------------------------------------------------------------------- | --------------------------------------------------------------------- | | ![decreasing with θ1 = 45deg and θ2 = 495deg](longer_decreasing.png) | ![decreasing with θ1 = 135deg and θ2 = 45deg](shorter_decreasing.png) | -### Formal syntax +## Formal syntax {{CSSSyntax}} From bf2fb932f0944206383b425b2cf0970932b84a85 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 16:17:54 +0800 Subject: [PATCH 30/52] Update `` --- files/en-us/web/css/color_value/index.md | 512 +++++------------------ 1 file changed, 109 insertions(+), 403 deletions(-) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 823dd3039f08068..a3205d446f24a2d 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -10,43 +10,21 @@ browser-compat: css.types.color The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a color. A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Alpha_compositing) _transparency value_, indicating how the color should [composite](https://www.w3.org/TR/compositing-1/#simplealphacompositing) with its background. -A `` can be defined in any of the following ways: - -- For the [sRGB color space](https://en.wikipedia.org/wiki/SRGB): - - - A predefined keyword (such as `blue` or `pink`) as described in the [`` page](/en-US/docs/Web/CSS/named-color). - - - {{cssxref("color_value/rgb","rgb()")}} functional notation or [`#` hexadecimal](/en-US/docs/Web/CSS/hex-color) using the [RGB cubic-coordinate](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) system. - - - {{cssxref("color_value/hsl","hsl()")}} functional notation using the [HSL cylindrical-coordinate](https://en.wikipedia.org/wiki/HSL_and_HSV) system. - - - {{cssxref("color_value/hwb","hwb()")}} functional notation using the [HWB cylindrical-coordinate](https://en.wikipedia.org/wiki/HWB_color_model) system. - -- Any visible color with the following: - - - {{cssxref("color_value/lch","lch()")}} functional notation using the [LCH cylindrical coordinate system](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC). - - - {{cssxref("color_value/oklch","oklch()")}} functional notation using the [Oklch cylindrical coordinate system](https://bottosson.github.io/posts/oklab/). - - - {{cssxref("color_value/lab","lab()")}} functional notation using the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space. - - - {{cssxref("color_value/oklab","oklab()")}} functional notation using the [Oklab](https://bottosson.github.io/posts/oklab/) color space. - -- The {{cssxref("color_value/color","color()")}} functional notation, using a variety of predefined or custom color spaces. - -> **Note:** These color values can be used to [apply color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color). +> **Note:** Although `` values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' [color profiles](https://en.wikipedia.org/wiki/ICC_profile). ## Syntax -The `` data type is specified using one of the options listed below. +A `` value can be specified using one of the methods listed below: -> **Note:** Although `` values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' [color profiles](https://en.wikipedia.org/wiki/ICC_profile). - -### Named colors +- By keyword: {{CSSXref("<named-color>")}}, {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). -Named colors are case-insensitive identifiers that represent a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the names used. +- By paramters in a color space: + - [sRGB](https://en.wikipedia.org/wiki/SRGB) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, {{CSSXref("color_value/rgb", "rgb()")}}; + - [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space: {{CSSXref("color_value/lab", "lab()")}}, {{CSSXref("color_value/lch", "lch()")}}; + - [Oklab](https://bottosson.github.io/posts/oklab/) color space: {{CSSXref("color_value/oklab", "oklab()")}}, {{CSSXref("color_value/oklch", "oklch()")}}; + - Other color spaces: {{CSSXref("color_value/color", "color()")}}. -The complete list of such keywords is described on the [`` page](/en-US/docs/Web/CSS/named-color). +- By mixing two colors: {{CSSXref("color_value/color-mix", "color-mix()")}}. ### currentcolor keyword @@ -62,91 +40,13 @@ If `currentcolor` is used as the value of the `color` property, it instead takes
``` -{{EmbedLiveSample('currentcolor_keyword', 600, 80)}} - -### RGB color model - -The RGB color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its red, green, and blue components. An optional alpha component represents the color's transparency. - -RGB colors can be expressed through both hexadecimal (prefixed with `#`) and functional (`rgb()`, `rgba()`) notations. - -- [Hexadecimal notation](/en-US/docs/Web/CSS/hex-color): `#RGB[A]` or`#RRGGBB[AA]` - - : `R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0–9, A–F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. The three-digit notation (`#RGB`) is a shorter version of the six-digit form (`#RRGGBB`). For example, `#f09` is the same color as `#ff0099`. Likewise, the four-digit RGB notation (`#RGBA`) is a shorter version of the eight-digit form (`#RRGGBBAA`). For example, `#0f38` is the same color as `#00ff3388`. -- [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) (and the legacy `rgba()`): `rgb(R G B[ / A])` (or `rgb[a](R, G, B[, A])` - - : `R` (red), `G` (green), and `B` (blue) can be either {{cssxref("<number>")}}s or {{cssxref("<percentage>")}}s, where the number `255` corresponds to `100%`. `A` (alpha) can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity). - -### HSL color model - -The HSL color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. - -- {{cssxref("color_value/hsl","hsl()")}}: `hsl(H S L [ / A])` (or legacy `hsl(H, S, L [, A])`) - - : Where the `H` is the hue, taking as a value an {{cssxref("<angle>")}} of the [color circle](/en-US/docs/Web/CSS/color_value/hsl#values) given in `deg`s, `rad`s, `grad`s, or `turn`s. By definition, red is `0deg`, yellow is `60deg`, green is `120deg`, cyan is `180deg`, blue is `240deg`, and magenta is `300deg`. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees. The `S` is the saturation as a `` value where 100% is completely saturated, while 0% is completely unsaturated (gray). The `L` is the lightness as a `` value where 100% is white, 0% is black, and 50% is "normal". The optional `A` is alpha transparency as a `` or a `` between 0 and 1, where the number 1 or 100% and means full opacity and 0 or 0% and means fully transparent. - -Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue). -However, using HSL to create color variations can produce surprising results, as it is not [perceptually uniform](https://en.wikipedia.org/wiki/Color_difference#Tolerance). For example, both `hsl(240 100% 50%)` and `hsl(60 100% 50%)` have the same lightness, even though the former is much darker than the latter. - -HSL colors are expressed through the functional {{cssxref("color_value/hsl", "hsl()")}} notation. - -> **Note:** The legacy `hsla()` syntax is an alias for {{cssxref("color_value/hsl","hsl()")}}, accepting the same parameters and behaving in the same way. - -### HWB color model - -Similar to HSL color model, the HWB color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its hue, whiteness and blackness components. - -As with HSL, HWB can be more intuitive to use than RGB. A hue is specified in the same way, followed by the amount of whiteness and blackness, respectively, in percentage values. This function also accepts an alpha value. - -> **Note:** There is **no** separate `hwba()` function as there is with HSL, the alpha value is an optional parameter, if it is not specified an alpha value of 1 (or 100%) is used. To specify this value a forward slash (`/`) must follow the blackness value before the alpha value is specified. - -HWB colors are expressed through the functional `hwb()` notation. - -> **Note:** The HWB function does **not** use commas to separate its values as with previous color functions. - -- [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb): `hwb(H W B[ / A])` - - - : Same as HSL: `H` (hue) is an {{cssxref("<angle>")}} of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in the [CSS Color](https://drafts.csswg.org/css-color/#the-hsl-notation) specification. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in the [CSS Color Level 3](https://drafts.csswg.org/css-color-3/#hsl-color) specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an ``, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. - - `W` (whiteness) and `B` (blackness) are percentages. These two colors mix, so you would need `0%` **whiteness** and `100%` **blackness** to produce the color black. And vice versa `100%` whiteness and `0%` blackness for the color white. `50%` of both values renders a mid-grey and any other variations a shade of the hue specified. - - `A` (alpha), optional, can be a {{cssxref("<number>")}} between `0` and `1`, or a {{cssxref("<percentage>")}}, where the number `1` corresponds to `100%` (full opacity). When specifying an alpha value it must be preceded with a forward slash (`/`). - -### System Colors - -In _forced colors mode_ (detectable with the [forced-colors](/en-US/docs/Web/CSS/@media/forced-colors) media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers. - -The keywords in the following list are defined by the CSS Color Module Level 4 specification: `AccentColor`, `AccentColorText`, `ActiveText`, `ButtonBorder`, `ButtonFace`, `ButtonText`, `Canvas`, `CanvasText`, `Field`, `FieldText`, `GrayText`, `Highlight`, `HighlightText`, `LinkText`, `Mark`, `MarkText`, `SelectedItem`, `SelectedItemText`, `VisitedText`. - -> **Note:** Note that these keywords are _case-insensitive_, but are listed here with mixed case for readability. - -### Lab colors - -CSS Color 4 introduced Lab colors. -Lab colors are specified via the {{cssxref("color_value/lab","lab()")}} functional notation. -They are not limited to a specific color space, and can represent the entire spectrum of human vision. - -### LCH color model - -CSS Color 4 introduced LCH colors. -LCH colors are specified via the {{cssxref("color_value/lch","lch()")}} functional notation. -They are not limited to a specific color space, and can represent the entire spectrum of human vision. - -In fact, LCH is the polar form of Lab. It is more human friendly than Lab, as its chroma and hue components specify qualities of the desired color, as opposed to mixing. -It is similar to HSL in that way, although it is far more perceptually uniform. -Unlike HSL which describes both `hsl(60 100% 50%)` and `hsl(240 100% 50%)` as having the same lightness, LCH (and Lab) correctly ascribes different lightness to them: -the former (yellow) has an L of 97.6 and the latter (blue) an L of 29.6. -Therefore, LCH can be used to create palettes across entirely different colors, with predictable results. -Please note that LCH hue is not the same as HSL hue and LCH chroma is not the same as HSL saturation, although they do share some conceptual similarities. - -### color() colors - -CSS Color 4 introduced this notation. -Colors specified via the {{cssxref("color_value/color","color()")}} function can specify a color in any of the predefined color spaces, -as well as custom color spaces, defined via the [`@color-profile`](/en-US/docs/Web/CSS/@color-profile) rule. +{{EmbedLiveSample("currentcolor_keyword", "100%", 80)}} ## Interpolation -In animations and [gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients), `` values are {{Glossary("interpolation", "interpolated")}} on each of their red, green, and blue components. By default, animation occurs in an RGBA color space, with interpolation's speed being determined by the [timing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. To prevent unexpected colors from appearing, consider using [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) functional notation. +Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations). -Interpolating the {{cssxref("<hue>")}} of two colors in functions that accept a hue angle is also possible and is described in more detail in the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) functional notation documentation. +When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly. The interpolation color space defaults to Oklab, but can be overriden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. ## Accessibility considerations @@ -185,33 +85,24 @@ const inputElem = document.querySelector("input"); const divElem = document.querySelector("div"); function validTextColor(stringToTest) { - if (stringToTest === "") { - return false; - } - if (stringToTest === "inherit") { - return false; - } - if (stringToTest === "transparent") { + if ( + stringToTest === "inherit" || + stringToTest === "transparent" + ) { return false; } - const image = document.createElement("img"); - image.style.color = "rgb(0, 0, 0)"; - image.style.color = stringToTest; - if (image.style.color !== "rgb(0, 0, 0)") { - return true; - } - image.style.color = "rgb(255, 255, 255)"; - image.style.color = stringToTest; - return image.style.color !== "rgb(255, 255, 255)"; + const div = document.createElement("div"); + div.style.color = stringToTest; + return !!div.style.color; } -inputElem.addEventListener("change", () => { +inputElem.addEventListener("input", () => { if (validTextColor(inputElem.value)) { divElem.style.backgroundColor = inputElem.value; divElem.textContent = ""; } else { - divElem.style.backgroundColor = "white"; + divElem.removeAttribute("style"); divElem.textContent = "Invalid color value"; } }); @@ -219,291 +110,106 @@ inputElem.addEventListener("change", () => { #### Result -{{EmbedLiveSample('Color_value_tester','100%', 300)}} - -### RGB syntax variations - -This example shows the many ways in which a single color can be created with the various RGB color syntaxes. - -```css-nolint -/* These syntax variations all specify the same color: a fully opaque hot pink. */ - -/* Hexadecimal syntax */ -#f09 -#F09 -#ff0099 -#FF0099 - -/* Functional syntax */ -rgb(255,0,153) -rgb(255, 0, 153) -rgb(255, 0, 153.0) -rgb(100%,0%,60%) -rgb(100%, 0%, 60%) -rgb(100%, 0, 60%) /* ERROR! Don't mix numbers and percentages. */ -rgb(255 0 153) - -/* Hexadecimal syntax with alpha value */ -#f09f -#F09F -#ff0099ff -#FF0099FF - -/* Functional syntax with alpha value */ -rgb(255, 0, 153, 1) -rgb(255, 0, 153, .5) -rgb(255, 0, 153, 0.5) -rgb(255, 0, 153, 100%) - -/* Whitespace syntax */ -rgb(255 0 153 / 1) -rgb(255 0 153 / 100%) - -/* Functional syntax with floats value */ -rgb(255, 0, 153.6, 1) -rgb(2.55e2, 0e0, 1.53e2, 1e2%) -``` +{{EmbedLiveSample("color_value_tester", "100%", 300)}} -### RGB transparency variations +### Reds of different shades -```css-nolint -/* Hexadecimal syntax */ -#3a30 /* 0% opaque green */ -#3a3f /* full opaque green */ -#33aa3300 /* 0% opaque green */ -#33aa3380 /* 50% opaque green */ +This example shows reds of different shades in the sRGB color space. -/* Functional syntax */ -rgba(51, 170, 51, 0.1) /* 10% opaque green */ -rgba(51, 170, 51, 0.4) /* 40% opaque green */ -rgba(51, 170, 51, 0.7) /* 70% opaque green */ -rgba(51, 170, 51, 1) /* full opaque green */ +#### HTML -/* Whitespace syntax */ -rgba(51 170 51 / 0.4) /* 40% opaque green */ -rgba(51 170 51 / 40%) /* 40% opaque green */ +```html +
+
+
+
+
+
+``` + +#### CSS -/* Functional syntax with floats value */ -rgba(51, 170, 51.6, 1) -rgba(5.1e1, 1.7e2, 5.1e1, 1e2%) +```css hidden +div { + display: inline-block; + margin: 10px; +} ``` -### HSL syntax variations - -```css-nolint -/* These examples all specify the same color: a lavender. */ -hsl(270,60%,70%) -hsl(270, 60%, 70%) -hsl(270 60% 70%) -hsl(270deg, 60%, 70%) -hsl(4.71239rad, 60%, 70%) -hsl(0.75turn, 60%, 70%) - -/* These examples all specify the same color: a lavender that is 15% opaque. */ -hsl(270, 60%, 50%, 0.15) -hsl(270, 60%, 50%, 0.15) -hsl(270, 60%, 50%, 15%) -hsl(270 60% 50% / 0.15) -hsl(270 60% 50% / 15%) +```css +div:nth-child(1) { + background-color: hsl(0 100% 0%); +} +div:nth-child(2) { + background-color: hsl(0 100% 20%); +} +div:nth-child(3) { + background-color: hsl(0 100% 40%); +} +div:nth-child(4) { + background-color: hsl(0 100% 60%); +} +div:nth-child(5) { + background-color: hsl(0 100% 80%); +} +div:nth-child(6) { + background-color: hsl(0 100% 100%); +} ``` -### HWB syntax variations +#### Result + +{{EmbedLiveSample("reds_of_different_shades", "100%", 200)}} + +### Reds of different saturations -```css-nolint -/* These examples all specify varying shades of a lime green. */ -hwb(90 10% 10%) -hwb(90 50% 10%) -hwb(90deg 10% 10%) -hwb(1.5708rad 60% 0%) -hwb(0.25turn 0% 40%) +This example shows reds of different saturations in the sRGB color space. -/* Same lime green but with an alpha value */ -hwb(90 10% 10% / 0.5) -hwb(90 10% 10% / 50%) +#### HTML + +```html +
+
+
+
+
+
``` -### Fully saturated colors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NotationDescriptionLive
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
- -### Lighter and darker greens - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NotationDescriptionLive
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
- -### Saturated and desaturated greens - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NotationDescriptionLive
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
- -### HSL transparency variations - -```css-nolint -hsl(240 100% 50% / 0.05) /* 5% opaque blue */ -hsl(240 100% 50% / 0.4) /* 40% opaque blue */ -hsl(240 100% 50% / 0.7) /* 70% opaque blue */ -hsl(240 100% 50% / 1) /* full opaque blue */ - -/* Comma syntax */ -hsl(240, 100%, 50%, 0.05) /* 5% opaque blue */ - -/* Percentage value for alpha */ -hsl(240 100% 50% / 5%) /* 5% opaque blue */ +#### CSS + +```css hidden +div { + display: inline-block; + margin: 10px; +} ``` +```css +div:nth-child(1) { + background-color: hsl(0 0% 50%); +} +div:nth-child(2) { + background-color: hsl(0 20% 50%); +} +div:nth-child(3) { + background-color: hsl(0 40% 50%); +} +div:nth-child(4) { + background-color: hsl(0 60% 50%); +} +div:nth-child(5) { + background-color: hsl(0 80% 50%); +} +div:nth-child(6) { + background-color: hsl(0 100% 50%); +} +``` + +#### Result + +{{EmbedLiveSample("reds_of_different_saturations", "100%", 200)}} + ## Specifications {{Specifications}} @@ -514,8 +220,8 @@ hsl(240 100% 50% / 5%) /* 5% opaque blue */ ## See also -- The {{Cssxref("opacity")}} property lets you define transparency at the element level. -- The {{cssxref("<hue>")}} data type represents a color by hue angle. -- Some common properties that use this data type: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}} +- {{CSSXref("opacity")}}: the property defining transparency at the element level +- {{CSSXref("<hue>")}}: the data type representing the hue angle of a color +- {{CSSXref("color")}}, {{CSSXref("background-color")}}, {{CSSXref("border-color")}}, {{CSSXref("box-shadow")}}, {{CSSXref("outline-color")}}, {{CSSXref("text-shadow")}}: common properties that use `` - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) - [New functions, gradients, and hues in CSS colors (Level 4)](/en-US/blog/css-color-module-level-4/) on MDN blog (May 3, 2023) From 43ef616773c92247eb5133874612891e5486bcee Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 17:11:00 +0800 Subject: [PATCH 31/52] Fix linting --- files/en-us/web/css/color_value/index.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index a3205d446f24a2d..6ab5a86063ab4d6 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -17,13 +17,11 @@ A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Al A `` value can be specified using one of the methods listed below: - By keyword: {{CSSXref("<named-color>")}}, {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). - - By paramters in a color space: - [sRGB](https://en.wikipedia.org/wiki/SRGB) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, {{CSSXref("color_value/rgb", "rgb()")}}; - [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space: {{CSSXref("color_value/lab", "lab()")}}, {{CSSXref("color_value/lch", "lch()")}}; - [Oklab](https://bottosson.github.io/posts/oklab/) color space: {{CSSXref("color_value/oklab", "oklab()")}}, {{CSSXref("color_value/oklch", "oklch()")}}; - Other color spaces: {{CSSXref("color_value/color", "color()")}}. - - By mixing two colors: {{CSSXref("color_value/color-mix", "color-mix()")}}. ### currentcolor keyword @@ -71,12 +69,10 @@ In this example we provide a `
` and a text input. Entering a valid color in ``` -#### CSS - -```css +```css hidden div { - width: 100%; height: 200px; + width: 200px; } ``` @@ -85,10 +81,7 @@ const inputElem = document.querySelector("input"); const divElem = document.querySelector("div"); function validTextColor(stringToTest) { - if ( - stringToTest === "inherit" || - stringToTest === "transparent" - ) { + if (stringToTest === "inherit" || stringToTest === "transparent") { return false; } @@ -132,7 +125,9 @@ This example shows reds of different shades in the sRGB color space. ```css hidden div { display: inline-block; + height: 100px; margin: 10px; + width: 100px; } ``` @@ -181,9 +176,12 @@ This example shows reds of different saturations in the sRGB color space. ```css hidden div { display: inline-block; + height: 100px; margin: 10px; + width: 100px; } ``` +``` ```css div:nth-child(1) { @@ -223,5 +221,5 @@ div:nth-child(6) { - {{CSSXref("opacity")}}: the property defining transparency at the element level - {{CSSXref("<hue>")}}: the data type representing the hue angle of a color - {{CSSXref("color")}}, {{CSSXref("background-color")}}, {{CSSXref("border-color")}}, {{CSSXref("box-shadow")}}, {{CSSXref("outline-color")}}, {{CSSXref("text-shadow")}}: common properties that use `` -- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) +- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color) - [New functions, gradients, and hues in CSS colors (Level 4)](/en-US/blog/css-color-module-level-4/) on MDN blog (May 3, 2023) From 881b938570f88815e1ec456fd7b137f8f0b7e3d5 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 17:14:26 +0800 Subject: [PATCH 32/52] Fix linting --- files/en-us/web/css/color_value/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 6ab5a86063ab4d6..1bb8393ba25c4d0 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -181,7 +181,6 @@ div { width: 100px; } ``` -``` ```css div:nth-child(1) { From e5c67395e2f32e42255d900b08bfb0aefb4e82f8 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 29 May 2023 17:29:15 +0800 Subject: [PATCH 33/52] Fine-tune `` example --- files/en-us/web/css/color_value/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 1bb8393ba25c4d0..5aa9f27e95c6542 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -124,10 +124,11 @@ This example shows reds of different shades in the sRGB color space. ```css hidden div { + box-sizing: border-box; display: inline-block; - height: 100px; + height: 80px; margin: 10px; - width: 100px; + width: 80px; } ``` @@ -149,6 +150,7 @@ div:nth-child(5) { } div:nth-child(6) { background-color: hsl(0 100% 100%); + border: solid; } ``` @@ -176,9 +178,9 @@ This example shows reds of different saturations in the sRGB color space. ```css hidden div { display: inline-block; - height: 100px; + height: 80px; margin: 10px; - width: 100px; + width: 80px; } ``` From a9d81b8b3dcafe0c55118e9b7e24a5347e682639 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 10:43:32 +0800 Subject: [PATCH 34/52] Apply suggestions from code review Co-authored-by: Brian Thomas Smith --- .../en-us/web/css/color-interpolation-method/index.md | 8 ++++---- files/en-us/web/css/color_value/index.md | 2 +- files/en-us/web/css/hue-interpolation-method/index.md | 10 ++++++---- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 222e2ba0dd1cb43..f58cf3d83ea6669 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -21,7 +21,7 @@ When interpolating `` values, the interpolation color space defaults to O ## Syntax -The `` data type has two syntaxes: +The `` specifies whether interpolation should use a rectangular color space or a polar color space with an optional hue interpolation method: ``` in @@ -32,11 +32,11 @@ in [ ] - `` - - : One of the keywords `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `lab`, `oklab`, `xyz`, `xyz-d50`, and `xyz-d65`. + - : One of the keywords `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, or `xyz-d65`. - `` - - : One of the keywords `hsl`, `hwb`, `lch`, and `oklch`. + - : One of the keywords `hsl`, `hwb`, `lch`, or `oklch`. - {{CSSXref("<hue-interpolation-method>")}} {{optional_inline}} @@ -69,7 +69,7 @@ The following example shows the effect of using different interpolation color sp ```css .gradient { - background-image: linear-gradient(var(--method) to right, #a37, #595); + background-image: linear-gradient(var(--method) to right, blue, red); height: 40px; width: 200px; } diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 5aa9f27e95c6542..14ce2278432107e 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -16,7 +16,7 @@ A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Al A `` value can be specified using one of the methods listed below: -- By keyword: {{CSSXref("<named-color>")}}, {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). +- By keyword: {{CSSXref("<named-color>")}} (such as `blue` or `pink`), {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). - By paramters in a color space: - [sRGB](https://en.wikipedia.org/wiki/SRGB) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, {{CSSXref("color_value/rgb", "rgb()")}}; - [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space: {{CSSXref("color_value/lab", "lab()")}}, {{CSSXref("color_value/lch", "lch()")}}; diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 744ac282ddf173e..b1055720b34dc28 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -15,7 +15,9 @@ spec-urls: https://drafts.csswg.org/css-color/#hue-interpolation {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. It is used as a component of the {{CSSXref("<color-interpolation-method>")}} data type. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. +The interpolation method specifies how to find a midpoint between two hue values based on a color wheel. +It is used as a component of the {{CSSXref("<color-interpolation-method>")}} data type. When interpolating `` values, the hue interpolation algorithm defaults to [`shorter`](#values). @@ -32,9 +34,9 @@ decreasing hue ### Values -Any pair of hue angles `θ1` and `θ2` correspond to two radii on the {{Glossary("color wheel")}}, which cut the circumference into two possible arcs for interpolation. Both arcs start at the fisrt radius and end at the second radius, but one goes clockwise and the other goes counterclockwise. +Any pair of hue angles `θ1` and `θ2` correspond to two radii on the {{Glossary("color wheel")}}, which cut the circumference into two possible arcs for interpolation. Both arcs start at the first radius and end at the second radius, but one goes clockwise and the other goes counterclockwise. -> **Note:** The following descriptions and illustrations are based on color wheels in which hue angles increase clockwise. Beware that there are also counterclockwise color wheels. +> **Note:** The following descriptions and illustrations are based on color wheels in which hue angles increase in a clockwise direction. Be aware that there are color wheels where an increase in angles will be a counterclockwise operation. There are four algorithms to determine which arc is used: @@ -182,7 +184,7 @@ p { #### Result -{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 500)}} +{{EmbedLiveSample("comparing_hue_interpolation_methods", "100%", 400)}} ## Specifications From 5577d412bc22dd8d446798a9f7a11ac1133ca50f Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 13:28:58 +0800 Subject: [PATCH 35/52] Add fallback for example on `` --- .../css/color-interpolation-method/index.md | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index f58cf3d83ea6669..d60a29efd908397 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -57,8 +57,6 @@ The following example shows the effect of using different interpolation color sp ```html
sRGB:
-
Display P3:
-
Oklab:
Oklch (with longer hue):
@@ -67,17 +65,53 @@ The following example shows the effect of using different interpolation color sp #### CSS -```css +```css hidden .gradient { - background-image: linear-gradient(var(--method) to right, blue, red); + background-image: linear-gradient(to right, var(--fallback)); height: 40px; width: 200px; } .srgb { - --method: in srgb; + --fallback: + rgb(0% 0% 100%), + rgb(20% 0% 80%), + rgb(40% 0% 60%), + rgb(60% 0% 40%), + rgb(80% 0% 20%), + rgb(100% 0% 0%); +} +.oklab { + --fallback: + oklab(0.452 -0.032 -0.312), + oklab(0.487 0.019 -0.224), + oklab(0.522 0.070 -0.137), + oklab(0.558 0.122 -0.049), + oklab(0.593 0.173 0.038), + oklab(0.628 0.225 0.126); +} +.oklch-longer { + --fallback: + oklch(0.452 0.313 264), + oklch(0.468 0.308 243), + oklch(0.484 0.303 221), + oklch(0.500 0.298 200), + oklch(0.516 0.293 179), + oklch(0.532 0.288 157), + oklch(0.548 0.283 136), + oklch(0.564 0.278 115), + oklch(0.580 0.273 93), + oklch(0.596 0.268 72), + oklch(0.612 0.263 51), + oklch(0.628 0.258 29); } -.display-p3 { - --method: in display-p3; +``` + +```css +.gradient { + background-image: linear-gradient(var(--method) to right, blue, red); +} +.srgb { + --method: in srgb; } .oklab { --method: in oklab; From 20ed98c52dbd0a33d1b7a2a000dfcf16667e4729 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:08:24 +0800 Subject: [PATCH 36/52] Eliminate custom variable --- .../css/color-interpolation-method/index.md | 79 ++++++++++--------- 1 file changed, 43 insertions(+), 36 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index d60a29efd908397..168c5045f5faf8e 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -67,42 +67,49 @@ The following example shows the effect of using different interpolation color sp ```css hidden .gradient { - background-image: linear-gradient(to right, var(--fallback)); height: 40px; width: 200px; } -.srgb { - --fallback: - rgb(0% 0% 100%), - rgb(20% 0% 80%), - rgb(40% 0% 60%), - rgb(60% 0% 40%), - rgb(80% 0% 20%), - rgb(100% 0% 0%); -} -.oklab { - --fallback: - oklab(0.452 -0.032 -0.312), - oklab(0.487 0.019 -0.224), - oklab(0.522 0.070 -0.137), - oklab(0.558 0.122 -0.049), - oklab(0.593 0.173 0.038), - oklab(0.628 0.225 0.126); -} -.oklch-longer { - --fallback: - oklch(0.452 0.313 264), - oklch(0.468 0.308 243), - oklch(0.484 0.303 221), - oklch(0.500 0.298 200), - oklch(0.516 0.293 179), - oklch(0.532 0.288 157), - oklch(0.548 0.283 136), - oklch(0.564 0.278 115), - oklch(0.580 0.273 93), - oklch(0.596 0.268 72), - oklch(0.612 0.263 51), - oklch(0.628 0.258 29); +@supports not (background-image: linear-gradient(in oklab, blue, red)) { + .srgb { + background-image: linear-gradient( + to right, + rgb(0% 0% 100%), + rgb(20% 0% 80%), + rgb(40% 0% 60%), + rgb(60% 0% 40%), + rgb(80% 0% 20%), + rgb(100% 0% 0%) + ); + } + .oklab { + background-image: linear-gradient( + to right, + oklab(0.452 -0.032 -0.312), + oklab(0.487 0.019 -0.224), + oklab(0.522 0.070 -0.137), + oklab(0.558 0.122 -0.049), + oklab(0.593 0.173 0.038), + oklab(0.628 0.225 0.126) + ); + } + .oklch-longer { + background-image: linear-gradient( + to right, + oklch(0.452 0.313 264), + oklch(0.468 0.308 243), + oklch(0.484 0.303 221), + oklch(0.500 0.298 200), + oklch(0.516 0.293 179), + oklch(0.532 0.288 157), + oklch(0.548 0.283 136), + oklch(0.564 0.278 115), + oklch(0.580 0.273 93), + oklch(0.596 0.268 72), + oklch(0.612 0.263 51), + oklch(0.628 0.258 29) + ); + } } ``` @@ -111,13 +118,13 @@ The following example shows the effect of using different interpolation color sp background-image: linear-gradient(var(--method) to right, blue, red); } .srgb { - --method: in srgb; + background-image: linear-gradient(in srgb to right, blue, red); } .oklab { - --method: in oklab; + background-image: linear-gradient(in oklab to right, blue, red); } .oklch-longer { - --method: in oklch longer hue; + background-image: linear-gradient(in oklch longer hue to right, blue, red); } ``` From a1f2e949401e2237cc23be778d4b7156e234e797 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:16:39 +0800 Subject: [PATCH 37/52] Fix --- files/en-us/web/css/color-interpolation-method/index.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 168c5045f5faf8e..8ac183933d84a40 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -66,10 +66,6 @@ The following example shows the effect of using different interpolation color sp #### CSS ```css hidden -.gradient { - height: 40px; - width: 200px; -} @supports not (background-image: linear-gradient(in oklab, blue, red)) { .srgb { background-image: linear-gradient( @@ -115,7 +111,8 @@ The following example shows the effect of using different interpolation color sp ```css .gradient { - background-image: linear-gradient(var(--method) to right, blue, red); + height: 40px; + width: 200px; } .srgb { background-image: linear-gradient(in srgb to right, blue, red); From 5370c7c87a8dbfe821315d140801cecec7d3fa9f Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 14:25:11 +0800 Subject: [PATCH 38/52] Simplify --- .../css/color-interpolation-method/index.md | 79 +++++++++---------- 1 file changed, 39 insertions(+), 40 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 8ac183933d84a40..6af82828583b7bb 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -66,46 +66,45 @@ The following example shows the effect of using different interpolation color sp #### CSS ```css hidden -@supports not (background-image: linear-gradient(in oklab, blue, red)) { - .srgb { - background-image: linear-gradient( - to right, - rgb(0% 0% 100%), - rgb(20% 0% 80%), - rgb(40% 0% 60%), - rgb(60% 0% 40%), - rgb(80% 0% 20%), - rgb(100% 0% 0%) - ); - } - .oklab { - background-image: linear-gradient( - to right, - oklab(0.452 -0.032 -0.312), - oklab(0.487 0.019 -0.224), - oklab(0.522 0.070 -0.137), - oklab(0.558 0.122 -0.049), - oklab(0.593 0.173 0.038), - oklab(0.628 0.225 0.126) - ); - } - .oklch-longer { - background-image: linear-gradient( - to right, - oklch(0.452 0.313 264), - oklch(0.468 0.308 243), - oklch(0.484 0.303 221), - oklch(0.500 0.298 200), - oklch(0.516 0.293 179), - oklch(0.532 0.288 157), - oklch(0.548 0.283 136), - oklch(0.564 0.278 115), - oklch(0.580 0.273 93), - oklch(0.596 0.268 72), - oklch(0.612 0.263 51), - oklch(0.628 0.258 29) - ); - } +/* Fallback styles */ +.srgb { + background-image: linear-gradient( + to right, + rgb(0% 0% 100%), + rgb(20% 0% 80%), + rgb(40% 0% 60%), + rgb(60% 0% 40%), + rgb(80% 0% 20%), + rgb(100% 0% 0%) + ); +} +.oklab { + background-image: linear-gradient( + to right, + oklab(0.452 -0.032 -0.312), + oklab(0.487 0.019 -0.224), + oklab(0.522 0.070 -0.137), + oklab(0.558 0.122 -0.049), + oklab(0.593 0.173 0.038), + oklab(0.628 0.225 0.126) + ); +} +.oklch-longer { + background-image: linear-gradient( + to right, + oklch(0.452 0.313 264), + oklch(0.468 0.308 243), + oklch(0.484 0.303 221), + oklch(0.500 0.298 200), + oklch(0.516 0.293 179), + oklch(0.532 0.288 157), + oklch(0.548 0.283 136), + oklch(0.564 0.278 115), + oklch(0.580 0.273 93), + oklch(0.596 0.268 72), + oklch(0.612 0.263 51), + oklch(0.628 0.258 29) + ); } ``` From f1607437fe0e50eddd177c342d4990e80b101462 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:47:19 +0800 Subject: [PATCH 39/52] Tweak example --- files/en-us/web/css/color-interpolation-method/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 6af82828583b7bb..2892339fdda4aa8 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -110,8 +110,8 @@ The following example shows the effect of using different interpolation color sp ```css .gradient { - height: 40px; - width: 200px; + height: 50px; + width: 100%; } .srgb { background-image: linear-gradient(in srgb to right, blue, red); @@ -126,7 +126,7 @@ The following example shows the effect of using different interpolation color sp #### Result -{{EmbedLiveSample("comparing_interpolation_color_spaces_using_gradients", "100%", 300)}} +{{EmbedLiveSample("comparing_interpolation_color_spaces_using_gradients", "100%", 250)}} ## Specifications From bcffa5245a4ff7572c87a09064df64cb7d124695 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Fri, 2 Jun 2023 17:53:04 +0800 Subject: [PATCH 40/52] Remove "example hint" --- files/en-us/web/css/hue-interpolation-method/index.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index b1055720b34dc28..8b069a87a4e94d5 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -47,8 +47,6 @@ There are four algorithms to determine which arc is used: - If `θ1 < θ2`, use the clockwise arc; - If `θ1 > θ2`, use the counterclockwise arc. - Examples: - | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = -225deg`, `θ2 = 45deg` | | ------------------------------------------------------------------ | ------------------------------------------------------------------- | | ![shorter with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![shorter with θ1 = -225deg and θ2 = 45deg](shorter_decreasing.png) | @@ -65,8 +63,6 @@ There are four algorithms to determine which arc is used: - If `θ1 < θ2`, use the clockwise arc; - If `θ1 > θ2`, use the counterclockwise arc. - Examples: - | `θ1 = 45deg`, `θ2 = -225deg` | `θ1 = 135deg`, `θ2 = 45deg` | | ----------------------------------------------------------------- | ---------------------------------------------------------------- | | ![longer with θ1 = 45deg and θ2 = -225deg](longer_decreasing.png) | ![longer with θ1 = 135deg and θ2 = 45deg](longer_increasing.png) | @@ -78,8 +74,6 @@ There are four algorithms to determine which arc is used: - If `θ1 < θ2`, the arc becomes the full circumference with a clockwise orientation. - If `θ1 ≥ θ2`, the arc degenerates to a single point. - Examples: - | `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 495deg`, `θ2 = 45deg` | | --------------------------------------------------------------------- | -------------------------------------------------------------------- | | ![increasing with θ1 = 45deg and θ2 = 135deg](shorter_increasing.png) | ![increasing with θ1 = 495deg and θ2 = 45deg](longer_increasing.png) | @@ -91,8 +85,6 @@ There are four algorithms to determine which arc is used: - If `θ1 ≤ θ2`, the arc degenerates to a single point. - If `θ1 > θ2`, the arc becomes the full circumference with a counterclockwise orientation. - Examples: - | `θ1 = 45deg`, `θ2 = 495deg` | `θ1 = 135deg`, `θ2 = 45deg` | | -------------------------------------------------------------------- | --------------------------------------------------------------------- | | ![decreasing with θ1 = 45deg and θ2 = 495deg](longer_decreasing.png) | ![decreasing with θ1 = 135deg and θ2 = 45deg](shorter_decreasing.png) | From 04f320c56c72723148c9ddc5a95a49d0c7ebc837 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 20:44:37 +0800 Subject: [PATCH 41/52] Update `` --- files/en-us/web/css/color_value/index.md | 135 +++++++++++++++++++++-- 1 file changed, 127 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 14ce2278432107e..9607929186b625a 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -14,10 +14,45 @@ A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Al ## Syntax +```css +/* RGB Hexadecimal */ +#f09 +#ff0099 + +/* RGB (Red, Green, Blue) */ +rgb(255 0 153) +rgb(255 0 153 / 80%) + +/* HSL (Hue, Saturation, Lightness) */ +hsl(150 30% 60%) +hsl(150 30% 60% / 0.8) + +/* HWB (Hue, Whiteness, Blackness) */ +hwb(12 50% 0%) +hwb(194 0% 0% / 0.5) + +/* LAB (Lightness, A-axis, B-axis) */ +lab(50% 40 59.5) +lab(50% 40 59.5 / 0.5) + +/* LCH (Lightness, Chroma, Hue) */ +lch(52.2% 72.2 50) +lch(52.2% 72.2 50 / 0.5) + +/* Oklab (Lightness, A-axis, B-axis) */ +oklab(59% 0.1 0.1) +oklab(59% 0.1 0.1 / 0.5) + +/* Oklch (Lightness, Chroma, Hue) */ +oklch(60% 0.15 50) +oklch(60% 0.15 50 / 0.5) +``` + A `` value can be specified using one of the methods listed below: -- By keyword: {{CSSXref("<named-color>")}} (such as `blue` or `pink`), {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). -- By paramters in a color space: +- By keywords: {{CSSXref("<named-color>")}} (such as `blue` or `pink`), {{CSSXref("<system-color>")}}, and [`currentcolor`](#currentcolor_keyword). +- By hexadecimal notations: {{CSSXref("<hex-color>")}} (such as `#ff0000`). +- By parameters in a color space using functional notations: - [sRGB](https://en.wikipedia.org/wiki/SRGB) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, {{CSSXref("color_value/rgb", "rgb()")}}; - [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space: {{CSSXref("color_value/lab", "lab()")}}, {{CSSXref("color_value/lch", "lch()")}}; - [Oklab](https://bottosson.github.io/posts/oklab/) color space: {{CSSXref("color_value/oklab", "oklab()")}}, {{CSSXref("color_value/oklch", "oklch()")}}; @@ -44,11 +79,11 @@ If `currentcolor` is used as the value of the `color` property, it instead takes Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations). -When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly. The interpolation color space defaults to Oklab, but can be overriden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. +When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly, with interpolation's speed being determined by the [timing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overriden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. ## Accessibility considerations -Some people have difficulty distinguishing colors. The [WCAG 2.0](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [color and color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for more information. +Some people have difficulty distinguishing colors. The [WCAG 2.2](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [color and color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for more information. ## Formal syntax @@ -105,6 +140,84 @@ inputElem.addEventListener("input", () => { {{EmbedLiveSample("color_value_tester", "100%", 300)}} +### Fully saturated sRGB colors + +This example shows fully saturated sRGB colors in the sRGB color space. + +#### HTML + +```html +
+
+
+
+
+
+
+
+
+
+
+
+``` + +#### CSS + +```css hidden +body { + display: flex; + flex-wrap: wrap; +} +div { + height: 80px; + margin: 10px; + width: 80px; +} +``` + +```css +div:nth-child(1) { + background-color: hsl(0 100% 50%); +} +div:nth-child(2) { + background-color: hsl(30 100% 50%); +} +div:nth-child(3) { + background-color: hsl(60 100% 50%); +} +div:nth-child(4) { + background-color: hsl(90 100% 50%); +} +div:nth-child(5) { + background-color: hsl(120 100% 50%); +} +div:nth-child(6) { + background-color: hsl(150 100% 50%); +} +div:nth-child(7) { + background-color: hsl(180 100% 50%); +} +div:nth-child(8) { + background-color: hsl(210 100% 50%); +} +div:nth-child(9) { + background-color: hsl(240 100% 50%); +} +div:nth-child(10) { + background-color: hsl(270 100% 50%); +} +div:nth-child(11) { + background-color: hsl(300 100% 50%); +} +div:nth-child(12) { + background-color: hsl(330 100% 50%); +} +``` + +#### Result + +{{EmbedLiveSample("fully_saturated_srgb_colors", "100%", 200)}} + ### Reds of different shades This example shows reds of different shades in the sRGB color space. @@ -123,9 +236,12 @@ This example shows reds of different shades in the sRGB color space. #### CSS ```css hidden +body { + display: flex; + flex-wrap: wrap; +} div { box-sizing: border-box; - display: inline-block; height: 80px; margin: 10px; width: 80px; @@ -156,7 +272,7 @@ div:nth-child(6) { #### Result -{{EmbedLiveSample("reds_of_different_shades", "100%", 200)}} +{{EmbedLiveSample("reds_of_different_shades", "100%", 150)}} ### Reds of different saturations @@ -176,8 +292,11 @@ This example shows reds of different saturations in the sRGB color space. #### CSS ```css hidden +body { + display: flex; + flex-wrap: wrap; +} div { - display: inline-block; height: 80px; margin: 10px; width: 80px; @@ -207,7 +326,7 @@ div:nth-child(6) { #### Result -{{EmbedLiveSample("reds_of_different_saturations", "100%", 200)}} +{{EmbedLiveSample("reds_of_different_saturations", "100%", 150)}} ## Specifications From 42483f09ec25c43d1b03dce64f72213bf2ff7e4f Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 22:01:03 +0800 Subject: [PATCH 42/52] Add back example for `color-mix()` --- .../web/css/color_value/color-mix/index.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index 0dc1c4f0a68a101..1ca681dcd0c10c6 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -115,6 +115,62 @@ li:nth-child(6) { {{EmbedLiveSample("mixing_two_colors", "100%", 150)}} +### Using hue interpolation in color-mix() + +When using shorter hue interpolation, the resulting hue angle is halfway between the input angles when taking the shortest route around the color wheel. +The longer hue interpolation method results in a hue angle which is the midpoint when taking the longer route around the color wheel. +For more information, see {{cssxref("<hue-interpolation-method>")}}. + +```html +
color one
+
color two
+
mixed shorter
+
mixed longer
+``` + +#### CSS + +```css hidden +body { + display: flex; + flex-wrap: wrap; +} +div { + border: 1px solid; + font: bold 150% monospace; + height: 100px; + margin: 10px 5%; + width: 30%; +} +``` + +```css +.color-one { + background-color: hsl(10 100% 50%); +} +.color-two { + background-color: hsl(60 100% 50%); +} +.shorter { + background-color: color-mix( + in hsl shorter hue, + hsl(10 100% 50%), + hsl(60 100% 50%) + ); +} +.longer { + background-color: color-mix( + in hsl longer hue, + hsl(10 100% 50%), + hsl(60 100% 50%) + ); +} +``` + +#### Result + +{{EmbedLiveSample("using_hue_interpolation_in_color_mix", "100%", 250)}} + ## Specifications {{Specifications}} From 20da4334493d8fdb5b8f61648811af4adae49ad4 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 22:13:47 +0800 Subject: [PATCH 43/52] Fix link --- files/en-us/web/css/color_value/color-mix/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md index 1ca681dcd0c10c6..1afda16e53079bd 100644 --- a/files/en-us/web/css/color_value/color-mix/index.md +++ b/files/en-us/web/css/color_value/color-mix/index.md @@ -181,6 +181,6 @@ div { ## See also -- {{cssxref("color_value")}} +- {{CSSXref("<color>")}} - {{CSSXref("<color-interpolation-method>")}} - {{cssxref("<hue>")}} From 7c76e3ac1063bfed739cdb0569df352cc4c5522f Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 23:14:12 +0800 Subject: [PATCH 44/52] Update `hsl()` --- files/en-us/web/css/color_value/hsl/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md index 9b17ca766c943c8..11892c2ac7817f2 100644 --- a/files/en-us/web/css/color_value/hsl/index.md +++ b/files/en-us/web/css/color_value/hsl/index.md @@ -29,7 +29,7 @@ The function also accepts a legacy syntax in which all values are separated with Functional notation: `hsl(H S L[ / A])` - `H` - - : A {{CSSXref("<hue>")}} representing the hue angle. + - : A {{CSSXref("<number>")}} or an {{CSSXref("<angle>")}} representing the hue angle. More details on this type can be found on the {{CSSXref("<hue>")}} reference. - `S` - : A {{CSSXref("<percentage>")}} representing saturation, where `100%` is completely saturated, while `0%` is completely unsaturated (gray). - `L` @@ -74,7 +74,7 @@ div { #### Result -{{EmbedLiveSample("using_hsl_with_conic-gradient", "100%", "140px")}} +{{EmbedLiveSample("using_hsl_with_conic-gradient", "100%", 140)}} ### Legacy syntax: comma-separated values @@ -107,7 +107,7 @@ div.comma-separated { #### Result -{{EmbedLiveSample("legacy_syntax_comma-separated_values", "100%", "150px")}} +{{EmbedLiveSample("legacy_syntax_comma-separated_values", "100%", 150)}} ### Legacy syntax: hsla() @@ -140,7 +140,7 @@ div.hsla { #### Result -{{EmbedLiveSample("legacy_syntax_hsla", "100%", "150px")}} +{{EmbedLiveSample("legacy_syntax_hsla", "100%", 150)}} ## Specifications @@ -152,5 +152,5 @@ div.hsla { ## See also -- The {{cssxref("<color>")}} type that represents any color. +- {{CSSXref("<color>")}}: the data type that represents any color - [HSL Color Picker](https://hslpicker.com/) From 74cf4098f386599e9ea45fe614ecfdd24685215e Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 23:24:48 +0800 Subject: [PATCH 45/52] Update `hwb()` --- files/en-us/web/css/color_value/hwb/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/color_value/hwb/index.md b/files/en-us/web/css/color_value/hwb/index.md index dda8101bef5ed1d..12eb0b1e3acc593 100644 --- a/files/en-us/web/css/color_value/hwb/index.md +++ b/files/en-us/web/css/color_value/hwb/index.md @@ -24,7 +24,7 @@ Functional notation: `hwb(H W B[ / A])` - `H` - - : A {{CSSXref("<hue>")}} representing the hue angle. + - : A {{CSSXref("<number>")}} or an {{CSSXref("<angle>")}} representing the hue angle. More details on this type can be found on the {{CSSXref("<hue>")}} reference. - `W`, `B` @@ -50,4 +50,4 @@ Functional notation: `hwb(H W B[ / A])` ## See also -- The {{CSSXref("<color>")}} data type for a list of all color notations +- {{CSSXref("<color>")}}: For a list of all color notations From 88824d422407afb97875e609c31ef322f1bca778 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 23:29:07 +0800 Subject: [PATCH 46/52] Update `lch()` --- files/en-us/web/css/color_value/lch/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/color_value/lch/index.md b/files/en-us/web/css/color_value/lch/index.md index 55d46e0957b0df5..f68de5f9af5b8e8 100644 --- a/files/en-us/web/css/color_value/lch/index.md +++ b/files/en-us/web/css/color_value/lch/index.md @@ -26,7 +26,7 @@ Functional notation: `lch(L C H[ / A])` - `C` - : A {{CSSXref("<number>")}} or a {{CSSXref("<percentage>")}} where `0%` is `0` and `100%` is the number `150`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`). - `H` - - : A {{CSSXref("<hue>")}} representing the hue angle. + - : A {{CSSXref("<number>")}} or an {{CSSXref("<angle>")}} representing the hue angle. More details on this type can be found on the {{CSSXref("<hue>")}} reference. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}}, where the number `1` corresponds to `100%` (full opacity). @@ -94,7 +94,7 @@ div { #### Result -{{EmbedLiveSample('Adjusting_lightness,_chroma,_and_hue_with_lch')}} +{{EmbedLiveSample("adjusting_lightness_chroma_and_hue_with_lch")}} ### Adjusting opacity with lch() @@ -140,7 +140,7 @@ div { #### Result -{{EmbedLiveSample('Adjusting_opacity_with_lch')}} +{{EmbedLiveSample("adjusting_opacity_with_lch")}} ## Specifications @@ -152,6 +152,6 @@ div { ## See also -- The [`` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations +- {{CSSXref("<color>")}}: For a list of all color notations - [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) - [Safari Technology Preview 122 release notes](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/): includes `lch()` and {{cssxref("color_value/lab",'lab()')}} colors From 3f2f79747651615dbf7005fdbd0ff91568a4133b Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 23:31:05 +0800 Subject: [PATCH 47/52] Update `oklch()` --- files/en-us/web/css/color_value/oklch/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/color_value/oklch/index.md b/files/en-us/web/css/color_value/oklch/index.md index f11609f830c4267..99b01000e09ec8f 100644 --- a/files/en-us/web/css/color_value/oklch/index.md +++ b/files/en-us/web/css/color_value/oklch/index.md @@ -26,7 +26,7 @@ Functional notation: `oklch(L C H[ / A])` - `C` - : A {{CSSXref("<number>")}} or a {{CSSXref("<percentage>")}}, where `0%` is `0` and `100%` is the number `0.4`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while the maximum is theoretically unbounded (but in practice does not exceed `0.5`). - `H` - - : A {{CSSXref("<hue>")}} representing the hue angle.. + - : A {{CSSXref("<number>")}} or an {{CSSXref("<angle>")}} representing the hue angle. More details on this type can be found on the {{CSSXref("<hue>")}} reference. - `A` {{optional_inline}} - : An {{CSSXref("<alpha-value>")}}, where the number `1` corresponds to `100%` (full opacity). @@ -91,7 +91,7 @@ div { #### Result -{{EmbedLiveSample('Adjusting_the_lightness_chroma_and_hue_of_a_color')}} +{{EmbedLiveSample("adjusting_the_lightness_chroma_and_hue_of_a_color")}} ### Adjusting the alpha value of a color @@ -137,7 +137,7 @@ div { #### Result -{{EmbedLiveSample('Adjusting_the_alpha_value_of_a_color')}} +{{EmbedLiveSample("adjusting_the_alpha_value_of_a_color")}} ## Specifications @@ -149,7 +149,7 @@ div { ## See also -- The [`` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations +- {{CSSXref("<color>")}}: For a list of all color notations - [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) - [OKLCH in CSS](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) - [Safari Technology Preview 137 release notes](https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/): includes `oklch()` and {{cssxref("color_value/oklab",'oklab()')}} colors From 110977205dc324dfab42ab582228c2ed25911344 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Sat, 3 Jun 2023 23:39:28 +0800 Subject: [PATCH 48/52] Update `` --- .../css/color-interpolation-method/index.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 2892339fdda4aa8..0abcb881bf074bd 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -81,29 +81,29 @@ The following example shows the effect of using different interpolation color sp .oklab { background-image: linear-gradient( to right, - oklab(0.452 -0.032 -0.312), - oklab(0.487 0.019 -0.224), - oklab(0.522 0.070 -0.137), - oklab(0.558 0.122 -0.049), - oklab(0.593 0.173 0.038), - oklab(0.628 0.225 0.126) + oklab(45.2% -0.032 -0.312), + oklab(48.7% 0.019 -0.224), + oklab(52.2% 0.070 -0.137), + oklab(55.8% 0.122 -0.049), + oklab(59.3% 0.173 0.038), + oklab(62.8% 0.225 0.126) ); } .oklch-longer { background-image: linear-gradient( to right, - oklch(0.452 0.313 264), - oklch(0.468 0.308 243), - oklch(0.484 0.303 221), - oklch(0.500 0.298 200), - oklch(0.516 0.293 179), - oklch(0.532 0.288 157), - oklch(0.548 0.283 136), - oklch(0.564 0.278 115), - oklch(0.580 0.273 93), - oklch(0.596 0.268 72), - oklch(0.612 0.263 51), - oklch(0.628 0.258 29) + oklch(45.2% 0.313 264), + oklch(46.8% 0.308 243), + oklch(48.4% 0.303 221), + oklch(50.0% 0.298 200), + oklch(51.6% 0.293 179), + oklch(53.2% 0.288 157), + oklch(54.8% 0.283 136), + oklch(56.4% 0.278 115), + oklch(58.0% 0.273 93), + oklch(59.6% 0.268 72), + oklch(61.2% 0.263 51), + oklch(62.8% 0.258 29) ); } ``` From 5493ca65dbdaf9f0dfbbef7e463013267cac3632 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 5 Jun 2023 10:10:03 +0200 Subject: [PATCH 49/52] docs(CSS): Run prettier over color-interpolation-method page --- files/en-us/web/css/color-interpolation-method/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 0abcb881bf074bd..46a0aa5bf68a323 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -83,7 +83,7 @@ The following example shows the effect of using different interpolation color sp to right, oklab(45.2% -0.032 -0.312), oklab(48.7% 0.019 -0.224), - oklab(52.2% 0.070 -0.137), + oklab(52.2% 0.07 -0.137), oklab(55.8% 0.122 -0.049), oklab(59.3% 0.173 0.038), oklab(62.8% 0.225 0.126) @@ -95,12 +95,12 @@ The following example shows the effect of using different interpolation color sp oklch(45.2% 0.313 264), oklch(46.8% 0.308 243), oklch(48.4% 0.303 221), - oklch(50.0% 0.298 200), + oklch(50% 0.298 200), oklch(51.6% 0.293 179), oklch(53.2% 0.288 157), oklch(54.8% 0.283 136), oklch(56.4% 0.278 115), - oklch(58.0% 0.273 93), + oklch(58% 0.273 93), oklch(59.6% 0.268 72), oklch(61.2% 0.263 51), oklch(62.8% 0.258 29) From eb37b6230a9fc2566cb9fd2d12225f568b84c843 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Tue, 6 Jun 2023 17:08:12 +0800 Subject: [PATCH 50/52] Apply suggestion from code reivew Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/color-interpolation-method/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index 46a0aa5bf68a323..33d51859df8de00 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -25,6 +25,7 @@ The `` specifies whether interpolation should use a ``` in +// or in [ ] ``` From 270152dce524f32855bd6c9ab1f259d294437291 Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 12 Jun 2023 22:49:56 +0800 Subject: [PATCH 51/52] Update files/en-us/web/css/hue-interpolation-method/index.md Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/hue-interpolation-method/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 8b069a87a4e94d5..6de8a86018de41e 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -97,7 +97,7 @@ There are four algorithms to determine which arc is used: ### Comparing hue interpolation algorithms -The following example shows the effect of using different hue interpolation algorithms for {{CSSXref("color_value/color-mix", "color-mix()")}}. +The following example shows the effect of using different hue interpolation algorithms in a {{CSSXref("linear-gradient()")}}. #### HTML From b87e2bdb7daf954f0f28fa002603d54dbb67facc Mon Sep 17 00:00:00 2001 From: yarusome <97945148+yarusome@users.noreply.github.com> Date: Mon, 12 Jun 2023 22:51:48 +0800 Subject: [PATCH 52/52] Add `` example for `` --- files/en-us/web/css/color_value/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 9607929186b625a..83f02df094977b3 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -15,6 +15,10 @@ A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Al ## Syntax ```css +/* Named colors */ +rebeccapurple +aliceblue + /* RGB Hexadecimal */ #f09 #ff0099