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-primary-value: transparent; --color-primary-percent: 100%; --color-secondary-value: transparent; --color-secondary-percent: 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; background-color: color-mix( in var(--color-space), var(--color-primary-value) var(--color-primary-percent), var(--color-secondary-value) var(--color-secondary-percent) ); }
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-primary-value: #0055cc;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #5e4db2;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #abdced;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #247554;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #c6398f;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #ffcc33;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #ee6d11;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #d13a2e;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #000000;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></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-primary-value: #ffffff;"> <div class="colorpalette" style="--color-space: srgb;"> <div class="colorheader">srgb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: srgb-linear;"> <div class="colorheader">srgb-linear</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hsl;"> <div class="colorheader">hsl</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: hwb;"> <div class="colorheader">hwb</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lch;"> <div class="colorheader">lch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklch;"> <div class="colorheader">oklch</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: lab;"> <div class="colorheader">lab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> <div class="colorpalette" style="--color-space: oklab;"> <div class="colorheader">oklab</div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 100%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: black;"></div> <div class="color" style="--color-secondary-percent: 0%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-secondary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 100%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 90%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 80%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 70%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 60%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 50%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 40%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 30%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 20%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 10%; --color-secondary-value: white;"></div> <div class="color" style="--color-primary-percent: 0%; --color-secondary-value: white;"></div> </div> </div> </div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container