Look Awesome

Brand

#254365 oklch(0.38 0.069 253)

Step	Hex	OKLCH	vs White	vs Black
Base	`#254365` Copy	`oklch(0.38 0.069 253)` Copy	10.15:1 AAA	2.07:1 fail
95	`#e9f3ff` Copy	`oklch(0.96 0.020 253)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d4e7ff` Copy	`oklch(0.92 0.038 253)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b2cceb` Copy	`oklch(0.84 0.052 253)` Copy	1.65:1 fail	12.7:1 AAA
70	`#93b1d5` Copy	`oklch(0.75 0.062 253)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7798bf` Copy	`oklch(0.67 0.069 253)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#58789d` Copy	`oklch(0.56 0.069 253)` Copy	4.59:1 AA	4.58:1 AA
40	`#3c5b7f` Copy	`oklch(0.46 0.069 253)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2c4766` Copy	`oklch(0.39 0.062 253)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1f344c` Copy	`oklch(0.32 0.052 253)` Copy	12.7:1 AAA	1.65:1 fail
10	`#101f2f` Copy	`oklch(0.23 0.038 253)` Copy	16.7:1 AAA	1.26:1 fail
05	`#09131e` Copy	`oklch(0.18 0.028 253)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#f6c944 oklch(0.85 0.152 90)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f6c944` Copy	`oklch(0.85 0.152 90)` Copy	1.57:1 fail	13.36:1 AAA
95	`#fff1cc` Copy	`oklch(0.96 0.051 90)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fbe3a5` Copy	`oklch(0.92 0.084 90)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e7c66e` Copy	`oklch(0.84 0.114 90)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d1aa34` Copy	`oklch(0.75 0.137 90)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b79000` Copy	`oklch(0.67 0.137 90)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#917100` Copy	`oklch(0.56 0.116 90)` Copy	4.59:1 AA	4.58:1 AA
40	`#6e5600` Copy	`oklch(0.46 0.095 90)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#574300` Copy	`oklch(0.39 0.080 90)` Copy	9.5:1 AAA	2.21:1 fail
20	`#403100` Copy	`oklch(0.32 0.066 90)` Copy	12.7:1 AAA	1.65:1 fail
10	`#271d00` Copy	`oklch(0.24 0.048 90)` Copy	16.7:1 AAA	1.26:1 fail
05	`#191100` Copy	`oklch(0.18 0.038 90)` Copy	18.7:1 AAA	1.12:1 fail

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

#ebeef2 oklch(0.95 0.006 255)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ebeef2` Copy	`oklch(0.95 0.006 255)` Copy	1.16:1 fail	18.04:1 AAA
95	`#f1f2f3` Copy	`oklch(0.96 0.002 255)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e4e5e8` Copy	`oklch(0.92 0.003 255)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c7c9cc` Copy	`oklch(0.84 0.005 255)` Copy	1.65:1 fail	12.7:1 AAA
70	`#acafb2` Copy	`oklch(0.75 0.006 255)` Copy	2.21:1 fail	9.5:1 AAA
60	`#929599` Copy	`oklch(0.67 0.006 255)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#737679` Copy	`oklch(0.56 0.006 255)` Copy	4.59:1 AA	4.58:1 AA
40	`#57595d` Copy	`oklch(0.46 0.006 255)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#444649` Copy	`oklch(0.39 0.006 255)` Copy	9.5:1 AAA	2.21:1 fail
20	`#313335` Copy	`oklch(0.32 0.005 255)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1d1e20` Copy	`oklch(0.23 0.003 255)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121213` Copy	`oklch(0.18 0.002 255)` Copy	18.7:1 AAA	1.12:1 fail

Success

#357641 oklch(0.51 0.106 148)

Step	Hex	OKLCH	vs White	vs Black
Base	`#357641` Copy	`oklch(0.51 0.106 148)` Copy	5.5:1 AA	3.82:1 AA-lg
95	`#def9e0` Copy	`oklch(0.96 0.042 148)` Copy	1.12:1 fail	18.7:1 AAA
90	`#caefce` Copy	`oklch(0.92 0.058 148)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a4d5a9` Copy	`oklch(0.83 0.080 148)` Copy	1.65:1 fail	12.7:1 AAA
70	`#81bc89` Copy	`oklch(0.74 0.096 148)` Copy	2.21:1 fail	9.5:1 AAA
60	`#62a36c` Copy	`oklch(0.66 0.106 148)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#42834d` Copy	`oklch(0.55 0.106 148)` Copy	4.59:1 AA	4.58:1 AA
40	`#236631` Copy	`oklch(0.45 0.106 148)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#155023` Copy	`oklch(0.38 0.096 148)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0b3b17` Copy	`oklch(0.31 0.080 148)` Copy	12.7:1 AAA	1.65:1 fail
10	`#04240b` Copy	`oklch(0.23 0.058 148)` Copy	16.7:1 AAA	1.26:1 fail
05	`#031606` Copy	`oklch(0.18 0.042 148)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#d26840 oklch(0.64 0.145 41)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d26840` Copy	`oklch(0.64 0.145 41)` Copy	3.62:1 AA-lg	5.79:1 AA
95	`#ffeee8` Copy	`oklch(0.96 0.020 41)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd3` Copy	`oklch(0.93 0.040 41)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a0` Copy	`oklch(0.84 0.089 41)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f89570` Copy	`oklch(0.76 0.130 41)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e3774f` Copy	`oklch(0.68 0.145 41)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be562e` Copy	`oklch(0.58 0.145 41)` Copy	4.59:1 AA	4.58:1 AA
40	`#9d3806` Copy	`oklch(0.48 0.145 41)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7e2900` Copy	`oklch(0.41 0.126 41)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5e1d00` Copy	`oklch(0.33 0.103 41)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3c0f00` Copy	`oklch(0.24 0.076 41)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280800` Copy	`oklch(0.19 0.058 41)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#bd2117 oklch(0.52 0.192 29)

Step	Hex	OKLCH	vs White	vs Black
Base	`#bd2117` Copy	`oklch(0.52 0.192 29)` Copy	6.19:1 AA	3.39:1 AA-lg
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	`#ff8f7f` Copy	`oklch(0.77 0.138 29)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fc6250` Copy	`oklch(0.69 0.192 29)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d63d30` Copy	`oklch(0.59 0.192 29)` Copy	4.59:1 AA	4.58:1 AA
40	`#b3110a` Copy	`oklch(0.49 0.192 29)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910000` Copy	`oklch(0.41 0.169 29)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0000` Copy	`oklch(0.34 0.138 29)` Copy	12.7:1 AAA	1.65:1 fail
10	`#460000` Copy	`oklch(0.25 0.102 29)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0100` Copy	`oklch(0.19 0.077 29)` 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 →

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

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