Color Picker & Converter
{{ currentHex }}
Alpha: {{ alpha.toFixed(2) }}
{{ fmt.label }}
{{ fmt.value }}
Design System Colors
Drop colors.yaml here or click to browse
{{ item.label }}
{{ item.color.shortName }}
{{ getSystemColorHex(item.color) }}
α {{ getSystemColorAlpha(item.color) }}
diff
Gradient Builder
{{ gradientAngle }}Β°
Color Stops
%
Presets
background: {{ gradientCSS }};
Palette Generator
Base Color
Color Harmony
{{ c }}
Tint & Shade Scale
{{ step.step }}
{{ step.hex }}
Export
{{ exportCode }}
Contrast Checker
{{ contrastResult.ratio }}:1
AA Large {{ contrastResult.aaLarge ? 'Pass' : 'Fail' }}
AA Normal {{ contrastResult.aa ? 'Pass' : 'Fail' }}
AAA Large {{ contrastResult.aaaLarge ? 'Pass' : 'Fail' }}
AAA Normal {{ contrastResult.aaa ? 'Pass' : 'Fail' }}
Large Text Preview
The quick brown fox jumps over the lazy dog. This sentence contains every letter of the alphabet.
Small text preview — The quick brown fox jumps over the lazy dog.Color Blindness Simulator
See how the current picker color appears to people with color vision deficiencies.
Original: {{ currentHex }}
{{ sim.label }}
{{ sim.hex }}
{{ sim.desc }}
Scale Simulation (from Palette base)
{{ sim }}
{{ step.step }}