Color

Syntax

Class
Properties
color-{...value}
color: {...};

Parameters

...value
<...color>
<div class="t1 font-72 color-blue">Hello world</div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Passing color name.
t1 color-blue
.t1.color-blue { color: #12A4E2; }
Passing color name and shade.
t1 color-blue-500
.t1.color-blue-500 { color: #12A4E2; }
Passing color name, shade, opacity.
t1 color-blue-500-50
.t1.color-blue-500-50 { color: #12A4E280; }
Passing color name, shade, opacity 100%.
t1 color-blue-500-100
.t1.color-blue-500-100 { color: #12A4E2; }
Passing HEX color value in lowercase format.
t1 color-hex-abcdef
.t1.color-hex-abcdef { color: #ABCDEF; }
Passing HEX color value in uppercase format.
t1 color-hex-ABCDEF
.t1.color-hex-ABCDEF { color: #ABCDEF; }
Passing HEX color value with alpha channel.
t1 color-hex-12345678
.t1.color-hex-12345678 { color: #12345678; }
Passing rgb color value.
t1 color-rgb-12-34-56
.t1.color-rgb-12-34-56 { color: rgb(12, 34, 56); }
Passing rgba color value.
t1 color-rgb-12-34-56-78
.t1.color-rgb-12-34-56-78 { color: rgba(12, 34, 56, 78%); }
Passing hsl color value.
t1 color-hsl-90-50-100
.t1.color-hsl-90-50-100 { color: hsl(90deg, 50%, 100%); }
Passing hsla color value.
t1 color-hsl-90-50-100-66
.t1.color-hsl-90-50-100-66 { color: hsla(90deg, 50%, 100%, 66%); }
Unknown color name.
t1 color-unknownname
Error: unknown color definition [unknownname] in class name [color-unknownname]