Look Awesome

Brand

#26486d oklch(0.39 0.075 252)

Step	Hex	OKLCH	vs White	vs Black
Base	`#26486d` Copy	`oklch(0.39 0.075 252)` Copy	9.42:1 AAA	2.23:1 fail
95	`#e8f3ff` Copy	`oklch(0.96 0.020 252)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d3e8ff` Copy	`oklch(0.92 0.039 252)` Copy	1.26:1 fail	16.7:1 AAA
80	`#afcced` Copy	`oklch(0.84 0.056 252)` Copy	1.65:1 fail	12.7:1 AAA
70	`#90b2d8` Copy	`oklch(0.75 0.067 252)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7398c2` Copy	`oklch(0.67 0.075 252)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5478a0` Copy	`oklch(0.56 0.075 252)` Copy	4.59:1 AA	4.58:1 AA
40	`#395b82` Copy	`oklch(0.46 0.075 252)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#294769` Copy	`oklch(0.39 0.067 252)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1c344e` Copy	`oklch(0.32 0.056 252)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0f1f31` Copy	`oklch(0.23 0.041 252)` Copy	16.7:1 AAA	1.26:1 fail
05	`#08131f` Copy	`oklch(0.18 0.030 252)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#f0d0a7 oklch(0.87 0.065 74)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f0d0a7` Copy	`oklch(0.87 0.065 74)` Copy	1.47:1 fail	14.29:1 AAA
95	`#fdf0e0` Copy	`oklch(0.96 0.026 74)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f5e3cc` Copy	`oklch(0.92 0.036 74)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ddc6a8` Copy	`oklch(0.84 0.049 74)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c6aa86` Copy	`oklch(0.75 0.058 74)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ae9069` Copy	`oklch(0.67 0.065 74)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8d714a` Copy	`oklch(0.57 0.065 74)` Copy	4.59:1 AA	4.58:1 AA
40	`#70542f` Copy	`oklch(0.47 0.065 74)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#594120` Copy	`oklch(0.40 0.058 74)` Copy	9.5:1 AAA	2.21:1 fail
20	`#422f15` Copy	`oklch(0.32 0.049 74)` Copy	12.7:1 AAA	1.65:1 fail
10	`#281c0a` Copy	`oklch(0.24 0.036 74)` Copy	16.7:1 AAA	1.26:1 fail
05	`#191106` Copy	`oklch(0.18 0.026 74)` Copy	18.7:1 AAA	1.12:1 fail

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

#fceecb oklch(0.95 0.048 89)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fceecb` Copy	`oklch(0.95 0.048 89)` Copy	1.15:1 fail	18.23:1 AAA
95	`#f7f1e4` Copy	`oklch(0.96 0.019 89)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ece5d2` Copy	`oklch(0.92 0.026 89)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d3c9af` Copy	`oklch(0.84 0.036 89)` Copy	1.65:1 fail	12.7:1 AAA
70	`#baae90` Copy	`oklch(0.75 0.043 89)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a19473` Copy	`oklch(0.67 0.048 89)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#817455` Copy	`oklch(0.56 0.048 89)` Copy	4.59:1 AA	4.58:1 AA
40	`#64583a` Copy	`oklch(0.46 0.048 89)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4f452a` Copy	`oklch(0.39 0.043 89)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3a321d` Copy	`oklch(0.32 0.036 89)` Copy	12.7:1 AAA	1.65:1 fail
10	`#231d0f` Copy	`oklch(0.23 0.026 89)` Copy	16.7:1 AAA	1.26:1 fail
05	`#161208` Copy	`oklch(0.18 0.019 89)` Copy	18.7:1 AAA	1.12:1 fail

Success

#2e6d98 oklch(0.51 0.094 242)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2e6d98` Copy	`oklch(0.51 0.094 242)` Copy	5.59:1 AA	3.76:1 AA-lg
95	`#e5f4ff` Copy	`oklch(0.96 0.022 242)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cde9ff` Copy	`oklch(0.92 0.042 242)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a0cff3` Copy	`oklch(0.83 0.070 242)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7db5df` Copy	`oklch(0.75 0.084 242)` Copy	2.21:1 fail	9.5:1 AAA
60	`#5d9bc9` Copy	`oklch(0.67 0.094 242)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#3d7ba7` Copy	`oklch(0.56 0.094 242)` Copy	4.59:1 AA	4.58:1 AA
40	`#1d5e88` Copy	`oklch(0.46 0.094 242)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#0e4a6e` Copy	`oklch(0.39 0.084 242)` Copy	9.5:1 AAA	2.21:1 fail
20	`#063653` Copy	`oklch(0.32 0.070 242)` Copy	12.7:1 AAA	1.65:1 fail
10	`#022034` Copy	`oklch(0.23 0.052 242)` Copy	16.7:1 AAA	1.26:1 fail
05	`#021421` Copy	`oklch(0.18 0.038 242)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#a29f8e oklch(0.70 0.024 99)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a29f8e` Copy	`oklch(0.70 0.024 99)` Copy	2.66:1 fail	7.89:1 AAA
95	`#f3f2eb` Copy	`oklch(0.96 0.010 99)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e7e6dc` Copy	`oklch(0.92 0.013 99)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cccabc` Copy	`oklch(0.84 0.018 99)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b2af9f` Copy	`oklch(0.75 0.022 99)` Copy	2.21:1 fail	9.5:1 AAA
60	`#989585` Copy	`oklch(0.67 0.024 99)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#797666` Copy	`oklch(0.56 0.024 99)` Copy	4.59:1 AA	4.58:1 AA
40	`#5c594a` Copy	`oklch(0.46 0.024 99)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#484639` Copy	`oklch(0.39 0.022 99)` Copy	9.5:1 AAA	2.21:1 fail
20	`#353328` Copy	`oklch(0.32 0.018 99)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1e17` Copy	`oklch(0.23 0.013 99)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13120d` Copy	`oklch(0.18 0.010 99)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#c99978 oklch(0.72 0.074 56)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c99978` Copy	`oklch(0.72 0.074 56)` Copy	2.53:1 fail	8.31:1 AAA
95	`#ffefe4` Copy	`oklch(0.96 0.023 56)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fce0cd` Copy	`oklch(0.92 0.040 56)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e8c2a9` Copy	`oklch(0.84 0.055 56)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d1a688` Copy	`oklch(0.76 0.066 56)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ba8b6a` Copy	`oklch(0.68 0.074 56)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#996c4c` Copy	`oklch(0.57 0.074 56)` Copy	4.59:1 AA	4.58:1 AA
40	`#7a4f30` Copy	`oklch(0.47 0.074 56)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#623d22` Copy	`oklch(0.40 0.066 56)` Copy	9.5:1 AAA	2.21:1 fail
20	`#492c16` Copy	`oklch(0.32 0.055 56)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2d190a` Copy	`oklch(0.24 0.040 56)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0f06` Copy	`oklch(0.18 0.029 56)` 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 →

Source image for The Great Wave off Kanagawa

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

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