Look Awesome

Brand

#3a54cd oklch(0.50 0.189 269)

Step	Hex	OKLCH	vs White	vs Black
Base	`#3a54cd` Copy	`oklch(0.50 0.189 269)` Copy	6.31:1 AA	3.33:1 AA-lg
95	`#edf2ff` Copy	`oklch(0.96 0.019 269)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dbe5ff` Copy	`oklch(0.92 0.037 269)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b5c8ff` Copy	`oklch(0.84 0.080 269)` Copy	1.65:1 fail	12.7:1 AAA
70	`#90acff` Copy	`oklch(0.76 0.125 269)` Copy	2.21:1 fail	9.5:1 AAA
60	`#6d8fff` Copy	`oklch(0.68 0.170 269)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#4d6be6` Copy	`oklch(0.57 0.189 269)` Copy	4.59:1 AA	4.58:1 AA
40	`#344cc5` Copy	`oklch(0.48 0.189 269)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#273aa3` Copy	`oklch(0.40 0.170 269)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1a297d` Copy	`oklch(0.33 0.142 269)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0d1750` Copy	`oklch(0.24 0.104 269)` Copy	16.7:1 AAA	1.26:1 fail
05	`#070e34` Copy	`oklch(0.19 0.076 269)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#b284c4 oklch(0.68 0.105 316)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b284c4` Copy	`oklch(0.68 0.105 316)` Copy	3.0:1 AA-lg	6.99:1 AA
95	`#faeeff` Copy	`oklch(0.96 0.027 316)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f5ddff` Copy	`oklch(0.93 0.052 316)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e1bdef` Copy	`oklch(0.84 0.079 316)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ca9fda` Copy	`oklch(0.76 0.094 316)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b284c4` Copy	`oklch(0.68 0.105 316)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9165a2` Copy	`oklch(0.58 0.105 316)` Copy	4.59:1 AA	4.58:1 AA
40	`#734884` Copy	`oklch(0.48 0.105 316)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5c376a` Copy	`oklch(0.40 0.094 316)` Copy	9.5:1 AAA	2.21:1 fail
20	`#452750` Copy	`oklch(0.33 0.079 316)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2a1632` Copy	`oklch(0.24 0.058 316)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b0d20` Copy	`oklch(0.19 0.042 316)` Copy	18.7:1 AAA	1.12:1 fail

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

#e3f1f8 oklch(0.95 0.018 229)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e3f1f8` Copy	`oklch(0.95 0.018 229)` Copy	1.15:1 fail	18.2:1 AAA
95	`#edf3f5` Copy	`oklch(0.96 0.007 229)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dfe6ea` Copy	`oklch(0.92 0.010 229)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c1cbd0` Copy	`oklch(0.84 0.013 229)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a4b0b6` Copy	`oklch(0.75 0.016 229)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8a979d` Copy	`oklch(0.67 0.018 229)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6b777e` Copy	`oklch(0.56 0.018 229)` Copy	4.59:1 AA	4.58:1 AA
40	`#4f5b61` Copy	`oklch(0.46 0.018 229)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3d474c` Copy	`oklch(0.39 0.016 229)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2c3438` Copy	`oklch(0.32 0.013 229)` Copy	12.7:1 AAA	1.65:1 fail
10	`#191f21` Copy	`oklch(0.23 0.010 229)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0f1315` Copy	`oklch(0.18 0.007 229)` Copy	18.7:1 AAA	1.12:1 fail

Success

#acdd6e oklch(0.84 0.150 129)

Step	Hex	OKLCH	vs White	vs Black
Base	`#acdd6e` Copy	`oklch(0.84 0.150 129)` Copy	1.58:1 fail	13.32:1 AAA
95	`#e4f9ce` Copy	`oklch(0.96 0.060 129)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d2efb4` Copy	`oklch(0.92 0.082 129)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b0d585` Copy	`oklch(0.83 0.112 129)` Copy	1.65:1 fail	12.7:1 AAA
70	`#91bc5a` Copy	`oklch(0.74 0.135 129)` Copy	2.21:1 fail	9.5:1 AAA
60	`#75a231` Copy	`oklch(0.66 0.150 129)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#578200` Copy	`oklch(0.55 0.146 129)` Copy	4.59:1 AA	4.58:1 AA
40	`#416300` Copy	`oklch(0.46 0.121 129)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#324d00` Copy	`oklch(0.38 0.102 129)` Copy	9.5:1 AAA	2.21:1 fail
20	`#243900` Copy	`oklch(0.31 0.083 129)` Copy	12.7:1 AAA	1.65:1 fail
10	`#142200` Copy	`oklch(0.23 0.061 129)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0b1500` Copy	`oklch(0.18 0.048 129)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fbe250 oklch(0.91 0.161 99)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fbe250` Copy	`oklch(0.91 0.161 99)` Copy	1.3:1 fail	16.1:1 AAA
95	`#fbf3c1` Copy	`oklch(0.96 0.065 99)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f3e7a1` Copy	`oklch(0.92 0.089 99)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dcca68` Copy	`oklch(0.83 0.121 99)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c5af27` Copy	`oklch(0.75 0.145 99)` Copy	2.21:1 fail	9.5:1 AAA
60	`#aa9500` Copy	`oklch(0.67 0.139 99)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#867500` Copy	`oklch(0.56 0.117 99)` Copy	4.59:1 AA	4.58:1 AA
40	`#665900` Copy	`oklch(0.46 0.096 99)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#504600` Copy	`oklch(0.39 0.081 99)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3b3300` Copy	`oklch(0.32 0.066 99)` Copy	12.7:1 AAA	1.65:1 fail
10	`#231e00` Copy	`oklch(0.23 0.049 99)` Copy	16.7:1 AAA	1.26:1 fail
05	`#161200` Copy	`oklch(0.18 0.039 99)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ff906c oklch(0.77 0.143 39)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff906c` Copy	`oklch(0.77 0.143 39)` Copy	2.22:1 fail	9.46:1 AAA
95	`#ffeee9` Copy	`oklch(0.96 0.020 39)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded4` Copy	`oklch(0.93 0.039 39)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a2` Copy	`oklch(0.84 0.088 39)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f89474` Copy	`oklch(0.76 0.129 39)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e37753` Copy	`oklch(0.68 0.144 39)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be5633` Copy	`oklch(0.58 0.144 39)` Copy	4.59:1 AA	4.58:1 AA
40	`#9d3711` Copy	`oklch(0.48 0.144 39)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#802702` Copy	`oklch(0.41 0.129 39)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611a00` Copy	`oklch(0.33 0.107 39)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0d00` Copy	`oklch(0.24 0.079 39)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280801` Copy	`oklch(0.19 0.057 39)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#f98053 oklch(0.73 0.160 41)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f98053` Copy	`oklch(0.73 0.160 41)` Copy	2.55:1 fail	8.24:1 AAA
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	`#ff9169` Copy	`oklch(0.77 0.144 41)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ea7245` Copy	`oklch(0.69 0.160 41)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c55121` Copy	`oklch(0.58 0.160 41)` Copy	4.59:1 AA	4.58:1 AA
40	`#9f3600` Copy	`oklch(0.48 0.149 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	`#5f1d00` 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	`#280700` Copy	`oklch(0.19 0.060 41)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#82a6f4 oklch(0.73 0.121 265)

Step	Hex	OKLCH	vs White	vs Black
Base	`#82a6f4` Copy	`oklch(0.73 0.121 265)` Copy	2.41:1 fail	8.71:1 AAA
95	`#ecf2ff` Copy	`oklch(0.96 0.019 265)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d9e6ff` Copy	`oklch(0.92 0.037 265)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b0caff` Copy	`oklch(0.84 0.081 265)` Copy	1.65:1 fail	12.7:1 AAA
70	`#8daef5` Copy	`oklch(0.75 0.109 265)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7194e0` Copy	`oklch(0.67 0.121 265)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5374bd` Copy	`oklch(0.57 0.121 265)` Copy	4.59:1 AA	4.58:1 AA
40	`#38569d` Copy	`oklch(0.47 0.121 265)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#294381` Copy	`oklch(0.40 0.109 265)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1c3061` Copy	`oklch(0.32 0.090 265)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0e1c3e` Copy	`oklch(0.24 0.066 265)` Copy	16.7:1 AAA	1.26:1 fail
05	`#081128` Copy	`oklch(0.18 0.048 265)` 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.018 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

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