Fill

Syntax

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

Parameters

...color
<...color>
<svg class="t1 w-64 h-64 fill-blue" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/><circle cx="50" cy="50" r="22.5" stroke="#fff" stroke-width="5" fill="none"/><path fill-rule="evenodd" clip-rule="evenodd" d="M55.724 54.846a7.5 7.5 0 11-.452-10.18l3.545-3.527A12.46 12.46 0 0050 37.5c-6.904 0-12.5 5.596-12.5 12.5S43.096 62.5 50 62.5c3.808 0 7.218-1.703 9.511-4.389l-3.787-3.265z" fill="#fff"/></svg>

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 fill-blue
.t1.fill-blue { fill: #12A4E2; }
Passing color name and shade.
t1 fill-blue-500
.t1.fill-blue-500 { fill: #12A4E2; }
Passing color name, shade, opacity.
t1 fill-blue-500-50
.t1.fill-blue-500-50 { fill: #12A4E280; }
Passing HEX color value in lowercase format.
t1 fill-hex-abcdef
.t1.fill-hex-abcdef { fill: #ABCDEF; }
Passing HEX color value in uppercase format.
t1 fill-hex-ABCDEF
.t1.fill-hex-ABCDEF { fill: #ABCDEF; }
Passing HEX color value with alpha channel.
t1 fill-hex-12345678
.t1.fill-hex-12345678 { fill: #12345678; }
Passing rgb color value.
t1 fill-rgb-12-34-56
.t1.fill-rgb-12-34-56 { fill: rgb(12, 34, 56); }
Passing rgba color value.
t1 fill-rgb-12-34-56-78
.t1.fill-rgb-12-34-56-78 { fill: rgba(12, 34, 56, 78%); }
Passing hsl color value.
t1 fill-hsl-60-20-40
.t1.fill-hsl-60-20-40 { fill: hsl(60deg, 20%, 40%); }
Passing hsla color value.
t1 fill-hsl-60-20-40-66
.t1.fill-hsl-60-20-40-66 { fill: hsla(60deg, 20%, 40%, 66%); }
Unknown color name.
t1 fill-unknownname
Error: unknown color definition [unknownname] in class name [fill-unknownname]