User:DePiep/rgb

{{m links|User:DePiep/cc}}
{{m links|User:DePiep/cc/data/colornames}}
{{m links|User:DePiep/sandbox}}

WP:LUA
{{m links|Arguments}}

User:DePiep/sandbox13=color names
{{m links|User:DePiep}}

Color spaces

class="wikitable sortable collapsible uncollapsed"
colspan=10 \| {{navbar-collapsible\|RGB and CSS defined color space notations{{ref\|a}}\|Wikipedia:Lua requests/Color conversion (RGB) table}}
color space ! {{nowrap\|data structure}} ! # arg ! example(s) ! example color value ! source ! alternative names, versions ! number of colors ! wiki page ! note
RGB \| triple hex 00-FF \| 1 \| #cd5c5c \| #cd5c5c \| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb] \| \| \| \| alt: triplet 0-F (#abc)
RGB \| name \| 1 \| maroon \| #800000 \| [http://www.w3.org/TR/css3-color/#html4] \| CSS 1–2.0 / HTML 3.2–4 / VGA color names \| 16 \| web colors \| HTML 4.01 names (X11 alt names)
RGB \| w3cname \| 1 \| indianred indian red \| #cd5c5c \| [http://www.w3.org/TR/css3-color/#Extended%20color%20keywords W3C, color keywords] \| X11 \| 147 \| X11 color names \| Multiple versions are around, sometimes clashing.
RGB \| trip separated \| 3 \| rgb(00, 9A, FF) rgb(80%, 36%, 36%) rgb(55, 0, 255) dec mixed \| \| \| \| \| \| Values out of range (<0, >255/100%) are clipped (w3c).
RGB \| triphex \| 3 \| rgb(c5, 10, a5) \| #c510a5 \| \| \| \| \| All hex only. Technically possible; not W3C mentioned. Should never mix with dec values
RGB \| red RGBgreen RGBblue \| cc \| 1 \| #cc0000 \| \| similar for -green, -blue. \| \| \| The red part value in RGB. Corresponds with #rr0000(?)
HSL \| trip \| 3 \| hsl(0°, 53%, 58%) hsl(0, 53, 58) \| #cd5c5c \| \| \| \| \| hue:0° satur:53% light:58%. With or without °, %
HSL \| tripnormalised \| 3 \| hsl(0, 0.53, 0.58) \| #cd5c5c \| \| \| \| \| normalsed into fractions (0 ... 1) (see W3C)
HSV \| trip \| 3 \| hsv(0°, 55%, 80%) \| #cd5c5c \| \| \| \| \| for: hue:0° satur:53% value:580%. With or without °, %

RGB-lum \| Luminance, cset contrast ratio \| \| \| \| \| \| [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18] \| \| {{tl\|RGBColorToLum}} and more, for contrast ratio checking \| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent]
RGBA \| RGBA-transp \| 4 \| {{nowrap\|rgba(80%, 36%, 36%, 0.2)}} \| \| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent] \| \| \| \| 0.0=transp, 1.0=opaque. parameter 4. HSLA [http://www.w3.org/TR/css3-color/#hsla-color w3c hsla]
colspan=10 style="background:#eee;" \|1.{{note\|a}}{{cite web\|url=http://www.w3.org/TR/css3-color/\|title=CSS Color Module Level 3 W3C Recommendation 07 June 2011\|publisher=W3C\|accessdate=1013-02-25\|date=2011-06-07}}

class="wikitable sortable collapsible uncollapsed"

colspan=10 | {{navbar-collapsible|RGB and CSS defined color space notations{{ref|a}}|Wikipedia:Lua requests/Color conversion (RGB) table}}

color space

! {{nowrap|data structure}}

! #
arg

! example(s)

! example color value

! source

! alternative names, versions

! number of colors

! wiki page

! note

RGB

| triple hex 00-FF

| 1

| #cd5c5c

| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb]

| alt: triplet 0-F (#abc)

RGB

| name

| 1

| maroon

| #800000

| [http://www.w3.org/TR/css3-color/#html4]

| CSS 1–2.0 / HTML 3.2–4 / VGA color names

| 16

| web colors

| HTML 4.01 names (X11 alt names)

RGB

| w3cname

| 1

| indianred
indian red

| #cd5c5c

| [http://www.w3.org/TR/css3-color/#Extended%20color%20keywords W3C, color keywords]

| X11

| 147

| X11 color names

| Multiple versions are around, sometimes clashing.

RGB

| trip separated

| 3

| rgb(00, 9A, FF)
rgb(80%, 36%, 36%)
rgb(55, 0, 255) dec
mixed

| Values out of range (<0, >255/100%) are clipped (w3c).

RGB

| triphex

| 3

| rgb(c5, 10, a5)

| #c510a5

| All hex only. Technically possible; not W3C mentioned. Should never mix with dec values

RGB

| red
RGBgreen
RGBblue

| cc

| 1

| #cc0000

| similar for -green, -blue.

| The red part value in RGB. Corresponds with #rr0000(?)

HSL

| trip

| 3

| hsl(0°, 53%, 58%)
hsl(0, 53, 58)

| #cd5c5c

| hue:0° satur:53% light:58%. With or without °, %

HSL

| tripnormalised

| 3

| hsl(0, 0.53, 0.58)

| #cd5c5c

| normalsed into fractions (0 ... 1) (see W3C)

HSV

| trip

| 3

| hsv(0°, 55%, 80%)

| #cd5c5c

| for: hue:0° satur:53% value:580%. With or without °, %

RGB-lum

| Luminance, cset contrast ratio

| [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18]

| {{tl|RGBColorToLum}} and more, for contrast ratio checking

| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent]

RGBA

| RGBA-transp

| 4

| {{nowrap|rgba(80%, 36%, 36%, 0.2)}}

| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent]

| 0.0=transp, 1.0=opaque. parameter 4. HSLA [http://www.w3.org/TR/css3-color/#hsla-color w3c hsla]

colspan=10 style="background:#eee;" |1.{{note|a}}{{cite web|url=http://www.w3.org/TR/css3-color/|title=CSS Color Module Level 3 W3C Recommendation 07 June 2011|publisher=W3C|accessdate=1013-02-25|date=2011-06-07}}

Resources

{{Lm|User:DePiep/cc}}
{{Lm|User:DePiep/cc/data}}
{{Lm|User:DePiep/cc/data/colornames}}
WP:LUA
{{Lm|Track gauge}}
{{Lm|User:DePiep/sandbox}}

;w3c examples

em { color: #f00 } /* #rgb */

em { color: #ff0000 } /* #rrggbb */

em { color: rgb(255,0,0) }

em { color: rgb(100%, 0%, 0%) }

;w3c on color

[http://www.w3.org/TR/css3-color/ css3 color]
[http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf w3c sRGB color space] sRGB definition
[http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/general.html#G14 color in text too]

;accity in general

[http://www.w3.org/standards/webdesign/accessibility w3c accessibility]
[http://www.w3.org/WAI/WCAG20/quickref/ WAI (acc'ity as a project) implementation quickref]
[http://www.w3.org/TR/WCAG20/ TR WCAG2.0]

=RGBA (alpha=opacity)=

w3c example

em { color: rgb(255,0,0) } /* integer range 0 - 255 */

em { color: rgba(255,0,0,1) /* the same,with explicit opacity of 1 */

em { color: rgb(100%,0%,0%) } /* float range 0.0% - 100.0% */

em { color: rgba(100%,0%,0%,1) } /* the same,with explicit opacity of 1 */]

error: rgb(1,2,3,4)
error: rgba(1,2,3,)
error: rgb(50%,2,3) - mixed num dim
error: background:dark goldenrod -- OK darkGoldenrod
alpha default=1

=See also / todo=

X11 color names
[http://www.w3.org/Graphics/Color/sRGB sRGB definition]
List of 8-bit computer hardware palettes
Template:Color contrast ratio great
[http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 W3C relative luminance value] (contrast calcs)
{{Lm|Sandbox/isaacl/ColourSpace/Formats/W3Cnames}}
User:Mr._Stradivarius/Tools stealing ideas
{{tl|RGBColorToLum}} luminance
Module talk:Sandbox/isaacl/ColourSpace/testcases
Module:Sandbox/isaacl/ColourSpace/Formats/W3Cnames --list of names

;Dictionary

w3c: basic color keywords(=16x), "color keywords" (="color name"), "opacity"="alphavalue" =1 minus tranparency, "color", "sRGB",

? SVG 1.1; fading,
[http://www.w3.org/TR/css3-color/#currentcolor CSS2 system colors deprecated] (Menu ect.)
"currentColor" (SVG, inherited, ...)
Deprecated: [http://www.w3.org/TR/css3-ui/#appearance css3 UI "appearance"] replaces system colors like "menu" ccs2
[http://www.w3.org/Graphics/Color/sRGB sRGB history]
[https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Typography#Grids mw on typography]

Sets: Derived colors

[http://www.w3schools.com/html/html_colors.asp Shades of Gray] to grey
[http://www.w3schools.com/html/html_colors.asp Web safe]
w3c: "color"; "opacity" == <alphavalue> == 1 − transparency
to #rgb FFF
X11

Sets: Pairs

Contrast
grey tone

Color spaces

formats

class="wikitable sortable collapsible collapsed"
colspan=10 \| {{navbar-collapsible\|RGB and CSS defined color space notations{{ref\|a}}\|Wikipedia:Lua requests/Color conversion (RGB) table}}
color space ! {{nowrap\|data structure}} ! # arg ! example(s) ! example color value ! source ! alternative names, versions ! number of colors ! wiki page ! note
RGB \| #hex24 \| 1 \| #cd5c5c \| #cd5c5c \| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb] \| \| \| \|
RGB \| hex24 \| 1 \| cd5c5c cd 5c 5c \| #cd5c5c \| \| \| \| \| If not a named color (6 characters), 6 hex chars can be concluded to be RGBhex6
RGB \| #hex3 \| 1 \| #abc \| #aabbcc \| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb] \| \| \| \| todo: check logic
RGB \| basicname \| 1 \| maroon \| #800000 \| [http://www.w3.org/TR/css3-color/#html4] \| CSS 1–2.0 / HTML 3.2–4 / VGA color names \| 16 \| web colors \| HTML 4.01 names
RGB \| w3cname \| 1 \| indianred indian red \| #cd5c5c \| [http://www.w3.org/TR/css3-color/#Extended%20color%20keywords W3C, color keywords] \| X11 \| 147 \| X11 color names \| Multiple versions are around, sometimes clashing.
RGB \| tripdec \| 3 \| rgb(255,0,0) \| \| \| \| 16^3 = ~16M \| \|
RGB \| tripperc \| 3 \| rgb(80%, 36%, 36%) \| \| \| \| \| \| Values out of range (<0, >255/100%) are clipped.
RGB \| tripmixed \| 3 \| rgb(80%, 120, 36%) \| \| \| \| \| \| RGB can mix % and dec
RGB \| triphex \| 3 \| rgb(c5, 10, a5) \| #c510a5 \| \| \| \| \| All hex only. Technically possible; not W3C mentioned. Should never mix with dec values
RGB \| red RGBgreen RGBblue \| cc \| 1 \| #cc0000 \| \| similar for -green, -blue. \| \| \| The red part value in RGB. Corresponds with #rr0000(?)
HSL \| trip \| 3 \| hsl(0°, 53%, 58%) hsl(0, 53, 58) \| #cd5c5c \| \| \| \| \| hue:0° satur:53% light:58%. With or without °, %
HSL \| tripnormalised \| 3 \| hsl(0, 0.53, 0.58) \| #cd5c5c \| \| \| \| \| normalsed into fractions (0 ... 1) (see W3C)
HSV \| trip \| 3 \| hsv(0°, 55%, 80%) \| #cd5c5c \| \| \| \| \| for: hue:0° satur:53% value:580%. With or without °, %
RGB \| Luminance \| tbd \| \| \| \| \| [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18] \| \| {{tl\|RGBColorToLum}} and more, for contrast ratio checking
~~(transp/op)~~ \| transparency opacity \| 4 \| 0.2 \| 20% opacity \| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent] \| \| \| \| transparency=future feature. opacity = 1-transparency. 0.0 (fully transparent) to 1.0 (fully opaque)
~~RGBA~~ \| ~~RGBA~~ \| 4 \| {{nowrap\|rgba(80%, 36%, 36%, 0.2)}} \| \| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent] \| \| \| \| transparency=future feature. 4th parameter is opacity/transparency
~~HSLA~~ \| ~~HSLA~~ \| 4 \| {{nowrap\|hsla(120, 100%, 50%, 0.2)}} \| \| [http://www.w3.org/TR/css3-color/#hsla-color W3C, hsla] \| \| \| \| transparency=future feature. hsl with explicit opacity
colspan=9 style="background:#eee;" \|1.{{note\|a}}{{cite web\|url=http://www.w3.org/TR/css3-color/\|title=CSS Color Module Level 3 W3C Recommendation 07 June 2011\|publisher=W3C\|accessdate=1013-02-25\|date=2011-06-07}}

class="wikitable sortable collapsible collapsed"

colspan=10 | {{navbar-collapsible|RGB and CSS defined color space notations{{ref|a}}|Wikipedia:Lua requests/Color conversion (RGB) table}}

color space

! {{nowrap|data structure}}

! #
arg

! example(s)

! example color value

! source

! alternative names, versions

! number of colors

! wiki page

! note

RGB

| #hex24

| 1

| #cd5c5c

| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb]

RGB

| hex24

| 1

| cd5c5c
cd 5c 5c

| #cd5c5c

| If not a named color (6 characters), 6 hex chars can be concluded to be RGBhex6

RGB

| #hex3

| 1

| #abc

| #aabbcc

| [http://www.w3.org/TR/css3-color/#rgb W3C, rgb]

| todo: check logic

RGB

| basicname

| 1

| maroon

| #800000

| [http://www.w3.org/TR/css3-color/#html4]

| CSS 1–2.0 / HTML 3.2–4 / VGA color names

| 16

| web colors

| HTML 4.01 names

RGB

| w3cname

| 1

| indianred
indian red

| #cd5c5c

| [http://www.w3.org/TR/css3-color/#Extended%20color%20keywords W3C, color keywords]

| X11

| 147

| X11 color names

| Multiple versions are around, sometimes clashing.

RGB

| tripdec

| 3

| rgb(255,0,0)

| 16^3 = ~16M

RGB

| tripperc

| 3

| rgb(80%, 36%, 36%)

| Values out of range (<0, >255/100%) are clipped.

RGB

| tripmixed

| 3

| rgb(80%, 120, 36%)

| RGB can mix % and dec

RGB

| triphex

| 3

| rgb(c5, 10, a5)

| #c510a5

| All hex only. Technically possible; not W3C mentioned. Should never mix with dec values

RGB

| red
RGBgreen
RGBblue

| cc

| 1

| #cc0000

| similar for -green, -blue.

| The red part value in RGB. Corresponds with #rr0000(?)

HSL

| trip

| 3

| hsl(0°, 53%, 58%)
hsl(0, 53, 58)

| #cd5c5c

| hue:0° satur:53% light:58%. With or without °, %

HSL

| tripnormalised

| 3

| hsl(0, 0.53, 0.58)

| #cd5c5c

| normalsed into fractions (0 ... 1) (see W3C)

HSV

| trip

| 3

| hsv(0°, 55%, 80%)

| #cd5c5c

| for: hue:0° satur:53% value:580%. With or without °, %

RGB

| Luminance

| tbd

| [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18]

| {{tl|RGBColorToLum}} and more, for contrast ratio checking

~~(transp/op)~~

| transparency
opacity

| 4

| 0.2

| 20% opacity

| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent]

| transparency=future feature. opacity = 1-transparency. 0.0 (fully transparent) to 1.0 (fully opaque)

~~RGBA~~

| ~~RGBA~~

| 4

| {{nowrap|rgba(80%, 36%, 36%, 0.2)}}

| [http://www.w3.org/TR/css3-color/#transparent W3C, transparent]

| transparency=future feature. 4th parameter is opacity/transparency

~~HSLA~~

| ~~HSLA~~

| 4

| {{nowrap|hsla(120, 100%, 50%, 0.2)}}

| [http://www.w3.org/TR/css3-color/#hsla-color W3C, hsla]

| transparency=future feature. hsl with explicit opacity

colspan=9 style="background:#eee;" |1.{{note|a}}{{cite web|url=http://www.w3.org/TR/css3-color/|title=CSS Color Module Level 3 W3C Recommendation 07 June 2011|publisher=W3C|accessdate=1013-02-25|date=2011-06-07}}

Wikipedia:Lua requests/Archive 1#Color conversion (RGB)

Experiments

class=wikitable

|+ Hi

style="background:yellow" | ye

| style="background:#7bea15" | #7bea15=rgb(123,234,21)

| style="background:rgb(123,234,21)" | rgb(123,234,21)

| style="background:rgba(123,234,21,0.5)" | rgba(123,234,21,.5)

style="color:red; background:rgb(123,234,21)" | color:red; rgb(123,234,21)

| style="color:red; background:rgba(123,234,21,0.5)" | color:red; rgba(123,234,21,.5)

style="color:rgb(255,0,0); background:rgb(123,234,21)" | "color:rgb(255,0,0); background:rgb(123,234,21)"

| style="color:rgba(255,0,0,0.5); background:rgb(123,234,21)" | "color:rgba(255,0,0,0.5); background:rgb(123,234,21)"

style="color:rgb(255,0,0); background:maroon" |

"color:rgb(255,0,0); background:maroon"

style="color:rgb(255,0,0); background:lime" |

"color:rgb(255,0,0); background:lime"

style="color:rgb(255,0,0); background:darkGoldenrod" |

"color:rgb(255,0,0); background:darkGoldenrod"

style="color:rgb(255,0,0); background:aliceblue" |

"color:rgb(255,0,0); background:aliceblue"

style="color:rgb(255,0,0); background:lime" |

"color:rgb(255,0,0); background:lime"

style="color:rgb(255,0,0); background:rgb(50%,75%,89%)" |

"color:rgb(255,0,0); background:rgb(123,234,21)"

style="color:rgb(255,0,0); background:#7f0000" |

"color:rgb(255,0,0); background:#7f0000"

style="color:rgb(255,0,0); background:rgb(123,234,21)" |

"color:rgb(255,0,0); background:rgb(123,234,21)"

style="color:rgb(255,0,0); background:rgb(50%,75%,89%)" |

"color:rgb(255,0,0); background:rgb(123,234,21)"

style="color:rgb(255,0,0); background:rgb(50%,75%,89%)" |

"color:rgb(255,0,0); background:rgb(50%,75%,89%)"

style="color:rgb(255,0,0); background:rgb(50.4%,75.4%,89.4%)" |

"color:rgb(255,0,0); background:rgb(50.4%,75.4%,89.4%)"

style="color:rgb(255,0,0); background:rgb(50.8%,75.8%,89.8%)" |

"color:rgb(255,0,0); background:rgb(50.8%,75.8%,89.8%)"