Look Awesome

BrandPrimary

#1f584f oklch(0.42 0.061 181)

Step	Hex	OKLCH	vs White	vs Black
Base	`#1f584f` Copy	`oklch(0.42 0.061 181)` Copy	8.18:1 AAA	2.57:1 fail
95	`#e0f7f2` Copy	`oklch(0.96 0.024 181)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cdece5` Copy	`oklch(0.92 0.034 181)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a8d2c9` Copy	`oklch(0.83 0.046 181)` Copy	1.65:1 fail	12.7:1 AAA
70	`#86b8ae` Copy	`oklch(0.74 0.055 181)` Copy	2.21:1 fail	9.5:1 AAA
60	`#689f95` Copy	`oklch(0.66 0.061 181)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#487f75` Copy	`oklch(0.56 0.061 181)` Copy	4.59:1 AA	4.58:1 AA
40	`#2a6259` Copy	`oklch(0.46 0.061 181)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1c4d46` Copy	`oklch(0.39 0.055 181)` Copy	9.5:1 AAA	2.21:1 fail
20	`#113933` Copy	`oklch(0.31 0.046 181)` Copy	12.7:1 AAA	1.65:1 fail
10	`#07221e` Copy	`oklch(0.23 0.034 181)` Copy	16.7:1 AAA	1.26:1 fail
05	`#051512` Copy	`oklch(0.18 0.024 181)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#38978d oklch(0.62 0.090 185)

Step	Hex	OKLCH	vs White	vs Black
Base	`#38978d` Copy	`oklch(0.62 0.090 185)` Copy	3.51:1 AA-lg	5.98:1 AA
95	`#d7f9f4` Copy	`oklch(0.96 0.036 185)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c0efe8` Copy	`oklch(0.92 0.049 185)` Copy	1.26:1 fail	16.7:1 AAA
80	`#94d5cd` Copy	`oklch(0.83 0.067 185)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6cbcb2` Copy	`oklch(0.74 0.081 185)` Copy	2.21:1 fail	9.5:1 AAA
60	`#46a499` Copy	`oklch(0.66 0.090 185)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#1d837a` Copy	`oklch(0.55 0.090 185)` Copy	4.59:1 AA	4.58:1 AA
40	`#00655d` Copy	`oklch(0.45 0.080 185)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004f48` Copy	`oklch(0.38 0.068 185)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003a35` Copy	`oklch(0.31 0.055 185)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00231f` Copy	`oklch(0.23 0.041 185)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001613` Copy	`oklch(0.18 0.032 185)` Copy	18.7:1 AAA	1.12:1 fail

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

#f7f7f7 oklch(0.98 0.000 90)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f7f7f7` Copy	`oklch(0.98 0.000 90)` Copy	1.07:1 fail	19.6:1 AAA
95	`#f2f2f2` Copy	`oklch(0.96 0.000 90)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e5e5e5` Copy	`oklch(0.92 0.000 90)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c9c9c9` Copy	`oklch(0.84 0.000 90)` Copy	1.65:1 fail	12.7:1 AAA
70	`#aeaeae` Copy	`oklch(0.75 0.000 90)` Copy	2.21:1 fail	9.5:1 AAA
60	`#959595` Copy	`oklch(0.67 0.000 90)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#757575` Copy	`oklch(0.56 0.000 90)` Copy	4.59:1 AA	4.58:1 AA
40	`#595959` Copy	`oklch(0.46 0.000 90)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#464646` Copy	`oklch(0.39 0.000 90)` Copy	9.5:1 AAA	2.21:1 fail
20	`#333333` Copy	`oklch(0.32 0.000 90)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1e1e` Copy	`oklch(0.23 0.000 90)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121212` Copy	`oklch(0.18 0.000 90)` Copy	18.7:1 AAA	1.12:1 fail

Success

#71b842 oklch(0.71 0.168 135)

Step	Hex	OKLCH	vs White	vs Black
Base	`#71b842` Copy	`oklch(0.71 0.168 135)` Copy	2.43:1 fail	8.64:1 AAA
95	`#ddfbce` Copy	`oklch(0.95 0.067 135)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c8f1b3` Copy	`oklch(0.91 0.092 135)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a2d884` Copy	`oklch(0.82 0.126 135)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7fbf58` Copy	`oklch(0.74 0.151 135)` Copy	2.21:1 fail	9.5:1 AAA
60	`#60a62e` Copy	`oklch(0.66 0.168 135)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#438500` Copy	`oklch(0.55 0.161 135)` Copy	4.59:1 AA	4.58:1 AA
40	`#326500` Copy	`oklch(0.45 0.133 135)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#264f00` Copy	`oklch(0.38 0.112 135)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1a3a00` Copy	`oklch(0.31 0.092 135)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0d2300` Copy	`oklch(0.23 0.068 135)` Copy	16.7:1 AAA	1.26:1 fail
05	`#061600` Copy	`oklch(0.18 0.053 135)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fe9e1b oklch(0.78 0.168 66)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fe9e1b` Copy	`oklch(0.78 0.168 66)` Copy	2.07:1 fail	10.12:1 AAA
95	`#ffefe0` Copy	`oklch(0.96 0.027 66)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c2` Copy	`oklch(0.92 0.053 66)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbc76` Copy	`oklch(0.84 0.116 66)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f19b34` Copy	`oklch(0.76 0.151 66)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d58200` Copy	`oklch(0.68 0.151 66)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a96600` Copy	`oklch(0.57 0.127 66)` Copy	4.59:1 AA	4.58:1 AA
40	`#824d00` Copy	`oklch(0.47 0.105 66)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#673c00` Copy	`oklch(0.40 0.089 66)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4c2b00` Copy	`oklch(0.32 0.072 66)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2f1900` Copy	`oklch(0.24 0.053 66)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0e00` Copy	`oklch(0.19 0.042 66)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ca4c29 oklch(0.58 0.168 36)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ca4c29` Copy	`oklch(0.58 0.168 36)` Copy	4.59:1 AA	4.58:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.020 36)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded5` Copy	`oklch(0.93 0.039 36)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a5` Copy	`oklch(0.84 0.087 36)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9072` Copy	`oklch(0.77 0.141 36)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ef6e4b` Copy	`oklch(0.69 0.168 36)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca4c29` Copy	`oklch(0.58 0.168 36)` Copy	4.59:1 AA	4.58:1 AA
40	`#a72c00` Copy	`oklch(0.48 0.165 36)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#852100` Copy	`oklch(0.41 0.140 36)` Copy	9.5:1 AAA	2.21:1 fail
20	`#641600` Copy	`oklch(0.33 0.114 36)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3f0a00` Copy	`oklch(0.24 0.084 36)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0500` Copy	`oklch(0.19 0.066 36)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Primary

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Primary

Progress & Controls

Notifications

← Key

Key →

Brand · Primary

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

BrandPrimary

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