Look Awesome

BrandHorizon

#0175b6 oklch(0.54 0.133 244)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0175b6` Copy	`oklch(0.54 0.133 244)` Copy	4.97:1 AA	4.22:1 AA-lg
95	`#e6f4ff` Copy	`oklch(0.96 0.021 244)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cee9ff` Copy	`oklch(0.92 0.042 244)` Copy	1.26:1 fail	16.7:1 AAA
80	`#95cfff` Copy	`oklch(0.83 0.090 244)` Copy	1.65:1 fail	12.7:1 AAA
70	`#66b5f4` Copy	`oklch(0.75 0.120 244)` Copy	2.21:1 fail	9.5:1 AAA
60	`#3e9cdf` Copy	`oklch(0.67 0.133 244)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#117bbc` Copy	`oklch(0.56 0.133 244)` Copy	4.59:1 AA	4.58:1 AA
40	`#005d93` Copy	`oklch(0.46 0.114 244)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004975` Copy	`oklch(0.39 0.096 244)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003557` Copy	`oklch(0.32 0.079 244)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002037` Copy	`oklch(0.23 0.058 244)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001425` Copy	`oklch(0.18 0.046 244)` Copy	18.7:1 AAA	1.12:1 fail

AccentDragon Fire

#f23e1c oklch(0.63 0.220 33)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f23e1c` Copy	`oklch(0.63 0.220 33)` Copy	3.83:1 AA-lg	5.48:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.019 33)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded7` Copy	`oklch(0.93 0.038 33)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8a9` Copy	`oklch(0.85 0.086 33)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9079` Copy	`oklch(0.77 0.140 33)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff6043` Copy	`oklch(0.69 0.200 33)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e22b00` Copy	`oklch(0.59 0.220 33)` Copy	4.59:1 AA	4.58:1 AA
40	`#ae1f00` Copy	`oklch(0.48 0.182 33)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8b1600` Copy	`oklch(0.41 0.154 33)` Copy	9.5:1 AAA	2.21:1 fail
20	`#680e00` Copy	`oklch(0.33 0.125 33)` Copy	12.7:1 AAA	1.65:1 fail
10	`#420500` Copy	`oklch(0.24 0.092 33)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2d0200` Copy	`oklch(0.19 0.073 33)` Copy	18.7:1 AAA	1.12:1 fail

Neutral `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#c1d1d8 oklch(0.85 0.020 226)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c1d1d8` Copy	`oklch(0.85 0.020 226)` Copy	1.57:1 fail	13.38:1 AAA
95	`#ecf3f6` Copy	`oklch(0.96 0.008 226)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dee7eb` Copy	`oklch(0.92 0.011 226)` Copy	1.26:1 fail	16.7:1 AAA
80	`#bfcbd0` Copy	`oklch(0.84 0.015 226)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a3b1b7` Copy	`oklch(0.75 0.018 226)` Copy	2.21:1 fail	9.5:1 AAA
60	`#88979e` Copy	`oklch(0.67 0.020 226)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#69787e` Copy	`oklch(0.56 0.020 226)` Copy	4.59:1 AA	4.58:1 AA
40	`#4d5b61` Copy	`oklch(0.46 0.020 226)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3b484d` Copy	`oklch(0.39 0.018 226)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2b3438` Copy	`oklch(0.32 0.015 226)` Copy	12.7:1 AAA	1.65:1 fail
10	`#181f22` Copy	`oklch(0.23 0.011 226)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0f1315` Copy	`oklch(0.18 0.008 226)` Copy	18.7:1 AAA	1.12:1 fail

Success

#55d4a4 oklch(0.79 0.133 165)

Step	Hex	OKLCH	vs White	vs Black
Base	`#55d4a4` Copy	`oklch(0.79 0.133 165)` Copy	1.85:1 fail	11.34:1 AAA
95	`#d0fce7` Copy	`oklch(0.95 0.053 165)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b5f3d6` Copy	`oklch(0.91 0.073 165)` Copy	1.26:1 fail	16.7:1 AAA
80	`#84dab5` Copy	`oklch(0.82 0.100 165)` Copy	1.65:1 fail	12.7:1 AAA
70	`#53c297` Copy	`oklch(0.74 0.120 165)` Copy	2.21:1 fail	9.5:1 AAA
60	`#17a97c` Copy	`oklch(0.65 0.133 165)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008660` Copy	`oklch(0.55 0.116 165)` Copy	4.59:1 AA	4.58:1 AA
40	`#006648` Copy	`oklch(0.45 0.095 165)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005038` Copy	`oklch(0.38 0.081 165)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003b28` Copy	`oklch(0.31 0.066 165)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002317` Copy	`oklch(0.23 0.048 165)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00160d` Copy	`oklch(0.18 0.038 165)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#e1af36 oklch(0.78 0.143 85)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e1af36` Copy	`oklch(0.78 0.143 85)` Copy	2.02:1 fail	10.39:1 AAA
95	`#fff0d2` Copy	`oklch(0.96 0.042 85)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fee2aa` Copy	`oklch(0.92 0.079 85)` Copy	1.26:1 fail	16.7:1 AAA
80	`#eac575` Copy	`oklch(0.84 0.107 85)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d4a842` Copy	`oklch(0.75 0.128 85)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bd8e00` Copy	`oklch(0.67 0.138 85)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#957000` Copy	`oklch(0.57 0.116 85)` Copy	4.59:1 AA	4.58:1 AA
40	`#725400` Copy	`oklch(0.47 0.096 85)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5a4200` Copy	`oklch(0.39 0.081 85)` Copy	9.5:1 AAA	2.21:1 fail
20	`#423000` Copy	`oklch(0.32 0.066 85)` Copy	12.7:1 AAA	1.65:1 fail
10	`#291c00` Copy	`oklch(0.24 0.049 85)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 85)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#fc998a oklch(0.78 0.122 29)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fc998a` Copy	`oklch(0.78 0.122 29)` Copy	2.09:1 fail	10.06:1 AAA
95	`#ffeeeb` Copy	`oklch(0.96 0.019 29)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded8` Copy	`oklch(0.93 0.038 29)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ac` Copy	`oklch(0.85 0.085 29)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f09789` Copy	`oklch(0.76 0.110 29)` Copy	2.21:1 fail	9.5:1 AAA
60	`#da7a6c` Copy	`oklch(0.68 0.122 29)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b65a4e` Copy	`oklch(0.58 0.122 29)` Copy	4.59:1 AA	4.58:1 AA
40	`#953d32` Copy	`oklch(0.48 0.122 29)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#792c24` Copy	`oklch(0.40 0.110 29)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5c1e18` Copy	`oklch(0.33 0.091 29)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3a100b` Copy	`oklch(0.24 0.067 29)` Copy	16.7:1 AAA	1.26:1 fail
05	`#250906` Copy	`oklch(0.19 0.049 29)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Horizon

Dragon Fire

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Horizon

Dragon Fire

Progress & Controls

Notifications

← Key

Key →

Brand · Horizon

Brand

Accent · Dragon Fire

Accent

Neutral · 0.02 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

BrandHorizon

AccentDragon Fire

Neutral `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.