Home
001 - Basic
002 - Variables
003 - Layer
🔥 004 - Nested Rules
010 - Grid
011 - Grid Complex
012 - Grid Contents
013 - Grid Logos
014 - Grid Spanning
020 - Container
021 - Container Style Queries
030 - Focus Visible
031 - Focus Within
040 - Color Scheme
🔥 041 - Color Light-Dark
042 - Color Mix
043 - Color Mix Mixer
044 - Color Mix Palette
🔥 045 - Relative Color
🔥 046 - Relative Color Palette
050 - Mask Image
051 - Background Clip Text
060 - Accent Color
070 - Has
🔥 071 - Starting Style
🔥 072 - Transition Behavior
090 - Text Wrap
🔥 100 - Popover
🔥 110 - scroll-driven animations
999 - Playground
Loading ...
CSS
.colorpalettes-list { display: flex; flex-direction: column; gap: 1.5rem; max-width: 900px; margin: 0 auto; } .colorpalettes-group { display: flex; flex-direction: column; gap: .5rem; } .colorpalettes-header { display: flex; align-items: center; margin: 0; font-family: monospace; gap: .5em; } .colorpalettes { --color-space: srgb; --color-lightness: 100%; display: flex; flex-direction: column; width: 100%; } .colorpalette { overflow: hidden; display: flex; align-items: center; } .colorheader { font-family: monospace; width: 110px; flex-shrink: 0; } .colorbox { --colorbox-bg: transparent; border-radius: .25rem; display: inline-block; height: 1.25em; width: 1.25em; background-color: var(--colorbox-bg); } .color { flex-grow: 1; height: 2rem; text-align: right; } .color--hsl { background: hsl(from var(--color-base) h s var(--color-lightness)); } .color--lch { background: lch(from var(--color-base) var(--color-lightness) c h); } .color--oklch { background: oklch(from var(--color-base) var(--color-lightness) c h); } .color--lab { background: lab(from var(--color-base) var(--color-lightness) a b); } .color--oklab { background: oklab(from var(--color-base) var(--color-lightness) a b); }
HTML
<div class="colorpalettes-list"> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #0055cc;"></span> #0055cc </h3> <div class="colorpalettes" style="--color-base: #0055cc;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #5e4db2;"></span> #5e4db2 </h3> <div class="colorpalettes" style="--color-base: #5e4db2;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #abdced;"></span> #abdced </h3> <div class="colorpalettes" style="--color-base: #abdced;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #247554;"></span> #247554 </h3> <div class="colorpalettes" style="--color-base: #247554;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #c6398f;"></span> #c6398f </h3> <div class="colorpalettes" style="--color-base: #c6398f;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #ffcc33;"></span> #ffcc33 </h3> <div class="colorpalettes" style="--color-base: #ffcc33;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #ee6d11;"></span> #ee6d11 </h3> <div class="colorpalettes" style="--color-base: #ee6d11;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #d13a2e;"></span> #d13a2e </h3> <div class="colorpalettes" style="--color-base: #d13a2e;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #000000;"></span> #000000 </h3> <div class="colorpalettes" style="--color-base: #000000;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> <div class="colorpalettes-group"> <h3 class="colorpalettes-header"> <span class="colorbox" style="--colorbox-bg: #ffffff;"></span> #ffffff </h3> <div class="colorpalettes" style="--color-base: #ffffff;"> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color color--hsl" style="--color-lightness: 0%;"></div> <div class="color color--hsl" style="--color-lightness: 5%;"></div> <div class="color color--hsl" style="--color-lightness: 10%;"></div> <div class="color color--hsl" style="--color-lightness: 15%;"></div> <div class="color color--hsl" style="--color-lightness: 20%;"></div> <div class="color color--hsl" style="--color-lightness: 25%;"></div> <div class="color color--hsl" style="--color-lightness: 30%;"></div> <div class="color color--hsl" style="--color-lightness: 35%;"></div> <div class="color color--hsl" style="--color-lightness: 40%;"></div> <div class="color color--hsl" style="--color-lightness: 45%;"></div> <div class="color color--hsl" style="--color-lightness: 50%;"></div> <div class="color color--hsl" style="--color-lightness: 55%;"></div> <div class="color color--hsl" style="--color-lightness: 60%;"></div> <div class="color color--hsl" style="--color-lightness: 65%;"></div> <div class="color color--hsl" style="--color-lightness: 70%;"></div> <div class="color color--hsl" style="--color-lightness: 75%;"></div> <div class="color color--hsl" style="--color-lightness: 80%;"></div> <div class="color color--hsl" style="--color-lightness: 85%;"></div> <div class="color color--hsl" style="--color-lightness: 90%;"></div> <div class="color color--hsl" style="--color-lightness: 95%;"></div> <div class="color color--hsl" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color color--lch" style="--color-lightness: 0%;"></div> <div class="color color--lch" style="--color-lightness: 5%;"></div> <div class="color color--lch" style="--color-lightness: 10%;"></div> <div class="color color--lch" style="--color-lightness: 15%;"></div> <div class="color color--lch" style="--color-lightness: 20%;"></div> <div class="color color--lch" style="--color-lightness: 25%;"></div> <div class="color color--lch" style="--color-lightness: 30%;"></div> <div class="color color--lch" style="--color-lightness: 35%;"></div> <div class="color color--lch" style="--color-lightness: 40%;"></div> <div class="color color--lch" style="--color-lightness: 45%;"></div> <div class="color color--lch" style="--color-lightness: 50%;"></div> <div class="color color--lch" style="--color-lightness: 55%;"></div> <div class="color color--lch" style="--color-lightness: 60%;"></div> <div class="color color--lch" style="--color-lightness: 65%;"></div> <div class="color color--lch" style="--color-lightness: 70%;"></div> <div class="color color--lch" style="--color-lightness: 75%;"></div> <div class="color color--lch" style="--color-lightness: 80%;"></div> <div class="color color--lch" style="--color-lightness: 85%;"></div> <div class="color color--lch" style="--color-lightness: 90%;"></div> <div class="color color--lch" style="--color-lightness: 95%;"></div> <div class="color color--lch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color color--oklch" style="--color-lightness: 0%;"></div> <div class="color color--oklch" style="--color-lightness: 5%;"></div> <div class="color color--oklch" style="--color-lightness: 10%;"></div> <div class="color color--oklch" style="--color-lightness: 15%;"></div> <div class="color color--oklch" style="--color-lightness: 20%;"></div> <div class="color color--oklch" style="--color-lightness: 25%;"></div> <div class="color color--oklch" style="--color-lightness: 30%;"></div> <div class="color color--oklch" style="--color-lightness: 35%;"></div> <div class="color color--oklch" style="--color-lightness: 40%;"></div> <div class="color color--oklch" style="--color-lightness: 45%;"></div> <div class="color color--oklch" style="--color-lightness: 50%;"></div> <div class="color color--oklch" style="--color-lightness: 55%;"></div> <div class="color color--oklch" style="--color-lightness: 60%;"></div> <div class="color color--oklch" style="--color-lightness: 65%;"></div> <div class="color color--oklch" style="--color-lightness: 70%;"></div> <div class="color color--oklch" style="--color-lightness: 75%;"></div> <div class="color color--oklch" style="--color-lightness: 80%;"></div> <div class="color color--oklch" style="--color-lightness: 85%;"></div> <div class="color color--oklch" style="--color-lightness: 90%;"></div> <div class="color color--oklch" style="--color-lightness: 95%;"></div> <div class="color color--oklch" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color color--lab" style="--color-lightness: 0%;"></div> <div class="color color--lab" style="--color-lightness: 5%;"></div> <div class="color color--lab" style="--color-lightness: 10%;"></div> <div class="color color--lab" style="--color-lightness: 15%;"></div> <div class="color color--lab" style="--color-lightness: 20%;"></div> <div class="color color--lab" style="--color-lightness: 25%;"></div> <div class="color color--lab" style="--color-lightness: 30%;"></div> <div class="color color--lab" style="--color-lightness: 35%;"></div> <div class="color color--lab" style="--color-lightness: 40%;"></div> <div class="color color--lab" style="--color-lightness: 45%;"></div> <div class="color color--lab" style="--color-lightness: 50%;"></div> <div class="color color--lab" style="--color-lightness: 55%;"></div> <div class="color color--lab" style="--color-lightness: 60%;"></div> <div class="color color--lab" style="--color-lightness: 65%;"></div> <div class="color color--lab" style="--color-lightness: 70%;"></div> <div class="color color--lab" style="--color-lightness: 75%;"></div> <div class="color color--lab" style="--color-lightness: 80%;"></div> <div class="color color--lab" style="--color-lightness: 85%;"></div> <div class="color color--lab" style="--color-lightness: 90%;"></div> <div class="color color--lab" style="--color-lightness: 95%;"></div> <div class="color color--lab" style="--color-lightness: 100%;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color color--oklab" style="--color-lightness: 0%;"></div> <div class="color color--oklab" style="--color-lightness: 5%;"></div> <div class="color color--oklab" style="--color-lightness: 10%;"></div> <div class="color color--oklab" style="--color-lightness: 15%;"></div> <div class="color color--oklab" style="--color-lightness: 20%;"></div> <div class="color color--oklab" style="--color-lightness: 25%;"></div> <div class="color color--oklab" style="--color-lightness: 30%;"></div> <div class="color color--oklab" style="--color-lightness: 35%;"></div> <div class="color color--oklab" style="--color-lightness: 40%;"></div> <div class="color color--oklab" style="--color-lightness: 45%;"></div> <div class="color color--oklab" style="--color-lightness: 50%;"></div> <div class="color color--oklab" style="--color-lightness: 55%;"></div> <div class="color color--oklab" style="--color-lightness: 60%;"></div> <div class="color color--oklab" style="--color-lightness: 65%;"></div> <div class="color color--oklab" style="--color-lightness: 70%;"></div> <div class="color color--oklab" style="--color-lightness: 75%;"></div> <div class="color color--oklab" style="--color-lightness: 80%;"></div> <div class="color color--oklab" style="--color-lightness: 85%;"></div> <div class="color color--oklab" style="--color-lightness: 90%;"></div> <div class="color color--oklab" style="--color-lightness: 95%;"></div> <div class="color color--oklab" style="--color-lightness: 100%;"></div> </div> </div> </div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container