Look Awesome

Brand

#4293db oklch(0.65 0.134 248)

Step	Hex	OKLCH	vs White	vs Black
Base	`#4293db` Copy	`oklch(0.65 0.134 248)` Copy	3.27:1 AA-lg	6.43:1 AA
95	`#e7f3ff` Copy	`oklch(0.96 0.021 248)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d1e8ff` Copy	`oklch(0.92 0.040 248)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9cceff` Copy	`oklch(0.83 0.087 248)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6db4f6` Copy	`oklch(0.75 0.120 248)` Copy	2.21:1 fail	9.5:1 AAA
60	`#499ae2` Copy	`oklch(0.67 0.134 248)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2579bf` Copy	`oklch(0.56 0.134 248)` Copy	4.59:1 AA	4.58:1 AA
40	`#005c9b` Copy	`oklch(0.46 0.126 248)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#00487b` Copy	`oklch(0.39 0.107 248)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00345c` Copy	`oklch(0.32 0.087 248)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001f3a` Copy	`oklch(0.23 0.064 248)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001327` Copy	`oklch(0.18 0.050 248)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#2dadcd oklch(0.69 0.115 219)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2dadcd` Copy	`oklch(0.69 0.115 219)` Copy	2.63:1 fail	7.97:1 AAA
95	`#dbf6ff` Copy	`oklch(0.96 0.031 219)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b7eeff` Copy	`oklch(0.92 0.060 219)` Copy	1.26:1 fail	16.7:1 AAA
80	`#84d5ed` Copy	`oklch(0.83 0.086 219)` Copy	1.65:1 fail	12.7:1 AAA
70	`#54bbd8` Copy	`oklch(0.74 0.104 219)` Copy	2.21:1 fail	9.5:1 AAA
60	`#19a2c2` Copy	`oklch(0.66 0.115 219)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#00809b` Copy	`oklch(0.56 0.101 219)` Copy	4.59:1 AA	4.58:1 AA
40	`#006277` Copy	`oklch(0.46 0.083 219)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004d5e` Copy	`oklch(0.39 0.070 219)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003845` Copy	`oklch(0.32 0.057 219)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00222a` Copy	`oklch(0.23 0.042 219)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00151c` Copy	`oklch(0.18 0.033 219)` Copy	18.7:1 AAA	1.12:1 fail

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

#a8d1da oklch(0.83 0.045 213)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a8d1da` Copy	`oklch(0.83 0.045 213)` Copy	1.64:1 fail	12.8:1 AAA
95	`#ebf3f5` Copy	`oklch(0.96 0.009 213)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce7ea` Copy	`oklch(0.92 0.012 213)` Copy	1.26:1 fail	16.7:1 AAA
80	`#bdcccf` Copy	`oklch(0.84 0.016 213)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a0b1b5` Copy	`oklch(0.75 0.020 213)` Copy	2.21:1 fail	9.5:1 AAA
60	`#86989c` Copy	`oklch(0.67 0.022 213)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#67797d` Copy	`oklch(0.56 0.022 213)` Copy	4.59:1 AA	4.58:1 AA
40	`#4b5c60` Copy	`oklch(0.46 0.022 213)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#39484b` Copy	`oklch(0.39 0.020 213)` Copy	9.5:1 AAA	2.21:1 fail
20	`#293537` Copy	`oklch(0.32 0.016 213)` Copy	12.7:1 AAA	1.65:1 fail
10	`#171f21` Copy	`oklch(0.23 0.012 213)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0e1314` Copy	`oklch(0.18 0.009 213)` Copy	18.7:1 AAA	1.12:1 fail

Success

#77d5d2 oklch(0.81 0.090 193)

Step	Hex	OKLCH	vs White	vs Black
Base	`#77d5d2` Copy	`oklch(0.81 0.090 193)` Copy	1.72:1 fail	12.23:1 AAA
95	`#d6f9f7` Copy	`oklch(0.96 0.036 193)` Copy	1.12:1 fail	18.7:1 AAA
90	`#beeeec` Copy	`oklch(0.92 0.049 193)` Copy	1.26:1 fail	16.7:1 AAA
80	`#92d5d3` Copy	`oklch(0.83 0.067 193)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6abcb9` Copy	`oklch(0.74 0.081 193)` Copy	2.21:1 fail	9.5:1 AAA
60	`#43a3a1` Copy	`oklch(0.66 0.090 193)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#168381` Copy	`oklch(0.55 0.090 193)` Copy	4.59:1 AA	4.58:1 AA
40	`#006462` Copy	`oklch(0.46 0.078 193)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e4d` Copy	`oklch(0.38 0.066 193)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003a39` Copy	`oklch(0.31 0.054 193)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002322` Copy	`oklch(0.23 0.040 193)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001615` Copy	`oklch(0.18 0.031 193)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#faeea2 oklch(0.94 0.096 100)

Step	Hex	OKLCH	vs White	vs Black
Base	`#faeea2` Copy	`oklch(0.94 0.096 100)` Copy	1.18:1 fail	17.82:1 AAA
95	`#f7f3d5` Copy	`oklch(0.96 0.038 100)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ece6be` Copy	`oklch(0.92 0.053 100)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d3cb94` Copy	`oklch(0.83 0.072 100)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bab06e` Copy	`oklch(0.75 0.087 100)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a2964c` Copy	`oklch(0.67 0.096 100)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#82762b` Copy	`oklch(0.56 0.096 100)` Copy	4.59:1 AA	4.58:1 AA
40	`#655900` Copy	`oklch(0.46 0.096 100)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#504600` Copy	`oklch(0.39 0.082 100)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3a3300` Copy	`oklch(0.32 0.067 100)` Copy	12.7:1 AAA	1.65:1 fail
10	`#231e00` Copy	`oklch(0.23 0.049 100)` Copy	16.7:1 AAA	1.26:1 fail
05	`#161200` Copy	`oklch(0.18 0.038 100)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ff986f oklch(0.78 0.136 42)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff986f` Copy	`oklch(0.78 0.136 42)` Copy	2.11:1 fail	9.97:1 AAA
95	`#ffeee8` Copy	`oklch(0.96 0.020 42)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd2` Copy	`oklch(0.93 0.040 42)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb99e` Copy	`oklch(0.84 0.090 42)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f39773` Copy	`oklch(0.76 0.122 42)` Copy	2.21:1 fail	9.5:1 AAA
60	`#de7a52` Copy	`oklch(0.68 0.136 42)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ba5a31` Copy	`oklch(0.58 0.136 42)` Copy	4.59:1 AA	4.58:1 AA
40	`#993c0d` Copy	`oklch(0.48 0.136 42)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7c2b00` Copy	`oklch(0.40 0.122 42)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5d1e00` Copy	`oklch(0.33 0.100 42)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3b1000` Copy	`oklch(0.24 0.073 42)` Copy	16.7:1 AAA	1.26:1 fail
05	`#260901` Copy	`oklch(0.19 0.054 42)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

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