Look Awesome

Brand

#c288be oklch(0.70 0.101 329)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c288be` Copy	`oklch(0.70 0.101 329)` Copy	2.78:1 fail	7.56:1 AAA
95	`#ffecfd` Copy	`oklch(0.96 0.030 329)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fddbfa` Copy	`oklch(0.93 0.056 329)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e9bbe5` Copy	`oklch(0.84 0.076 329)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d39dcf` Copy	`oklch(0.76 0.091 329)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bb82b8` Copy	`oklch(0.68 0.101 329)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9a6296` Copy	`oklch(0.58 0.101 329)` Copy	4.59:1 AA	4.58:1 AA
40	`#7b4678` Copy	`oklch(0.48 0.101 329)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#633561` Copy	`oklch(0.40 0.091 329)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4a2548` Copy	`oklch(0.33 0.076 329)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2e152c` Copy	`oklch(0.24 0.056 329)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0c1c` Copy	`oklch(0.19 0.040 329)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#ffbf77 oklch(0.85 0.116 68)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffbf77` Copy	`oklch(0.85 0.116 68)` Copy	1.62:1 fail	12.97:1 AAA
95	`#ffefdf` Copy	`oklch(0.96 0.028 68)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c0` Copy	`oklch(0.92 0.055 68)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f0c18d` Copy	`oklch(0.84 0.087 68)` Copy	1.65:1 fail	12.7:1 AAA
70	`#dca465` Copy	`oklch(0.76 0.104 68)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c58840` Copy	`oklch(0.68 0.116 68)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a36919` Copy	`oklch(0.57 0.116 68)` Copy	4.59:1 AA	4.58:1 AA
40	`#804e00` Copy	`oklch(0.47 0.103 68)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#653d00` Copy	`oklch(0.40 0.087 68)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4b2c00` Copy	`oklch(0.32 0.071 68)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2e1900` Copy	`oklch(0.24 0.052 68)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1e0f00` Copy	`oklch(0.18 0.041 68)` Copy	18.7:1 AAA	1.12:1 fail

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

#4a3d71 oklch(0.40 0.086 294)

Step	Hex	OKLCH	vs White	vs Black
Base	`#4a3d71` Copy	`oklch(0.40 0.086 294)` Copy	9.56:1 AAA	2.2:1 fail
95	`#f2f0ff` Copy	`oklch(0.96 0.020 294)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e6e3f7` Copy	`oklch(0.92 0.028 294)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cbc6e1` Copy	`oklch(0.84 0.038 294)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b0abca` Copy	`oklch(0.76 0.045 294)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9791b3` Copy	`oklch(0.67 0.050 294)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#787192` Copy	`oklch(0.57 0.050 294)` Copy	4.59:1 AA	4.58:1 AA
40	`#5b5574` Copy	`oklch(0.47 0.050 294)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#48425d` Copy	`oklch(0.40 0.045 294)` Copy	9.5:1 AAA	2.21:1 fail
20	`#343045` Copy	`oklch(0.32 0.038 294)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1c2a` Copy	`oklch(0.24 0.028 294)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13111b` Copy	`oklch(0.18 0.020 294)` Copy	18.7:1 AAA	1.12:1 fail

Success

#96c188 oklch(0.77 0.091 138)

Step	Hex	OKLCH	vs White	vs Black
Base	`#96c188` Copy	`oklch(0.77 0.091 138)` Copy	2.04:1 fail	10.28:1 AAA
95	`#e5f7df` Copy	`oklch(0.96 0.037 138)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d4eccc` Copy	`oklch(0.92 0.050 138)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b2d2a7` Copy	`oklch(0.83 0.069 138)` Copy	1.65:1 fail	12.7:1 AAA
70	`#92b986` Copy	`oklch(0.74 0.082 138)` Copy	2.21:1 fail	9.5:1 AAA
60	`#76a069` Copy	`oklch(0.66 0.091 138)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#57804a` Copy	`oklch(0.56 0.091 138)` Copy	4.59:1 AA	4.58:1 AA
40	`#3c632e` Copy	`oklch(0.46 0.091 138)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2c4e20` Copy	`oklch(0.38 0.082 138)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1e3915` Copy	`oklch(0.31 0.069 138)` Copy	12.7:1 AAA	1.65:1 fail
10	`#10220a` Copy	`oklch(0.23 0.050 138)` Copy	16.7:1 AAA	1.26:1 fail
05	`#091505` Copy	`oklch(0.18 0.037 138)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fed36f oklch(0.88 0.128 86)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fed36f` Copy	`oklch(0.88 0.128 86)` Copy	1.42:1 fail	14.76:1 AAA
95	`#fff1d0` Copy	`oklch(0.96 0.045 86)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fae3b0` Copy	`oklch(0.92 0.070 86)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e5c67f` Copy	`oklch(0.84 0.096 86)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cfaa52` Copy	`oklch(0.75 0.115 86)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b88f21` Copy	`oklch(0.67 0.128 86)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#947000` Copy	`oklch(0.57 0.116 86)` Copy	4.59:1 AA	4.58:1 AA
40	`#715500` Copy	`oklch(0.47 0.095 86)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#594200` Copy	`oklch(0.39 0.081 86)` Copy	9.5:1 AAA	2.21:1 fail
20	`#423000` Copy	`oklch(0.32 0.066 86)` Copy	12.7:1 AAA	1.65:1 fail
10	`#281c00` Copy	`oklch(0.24 0.048 86)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 86)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#f97667 oklch(0.72 0.163 28)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f97667` Copy	`oklch(0.72 0.163 28)` Copy	2.69:1 fail	7.82:1 AAA
95	`#ffeeeb` Copy	`oklch(0.96 0.019 28)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded9` Copy	`oklch(0.93 0.038 28)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ad` Copy	`oklch(0.85 0.085 28)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f81` Copy	`oklch(0.77 0.138 28)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ef6d5e` Copy	`oklch(0.69 0.163 28)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca4b3f` Copy	`oklch(0.58 0.163 28)` Copy	4.59:1 AA	4.58:1 AA
40	`#a72a22` Copy	`oklch(0.48 0.163 28)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#891a14` Copy	`oklch(0.41 0.147 28)` Copy	9.5:1 AAA	2.21:1 fail
20	`#680f0b` Copy	`oklch(0.33 0.122 28)` Copy	12.7:1 AAA	1.65:1 fail
10	`#420604` Copy	`oklch(0.24 0.090 28)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0403` Copy	`oklch(0.19 0.065 28)` 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.05 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

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