Look Awesome

BrandCrimson Violet

#751847 oklch(0.38 0.134 355)

Step	Hex	OKLCH	vs White	vs Black
Base	`#751847` Copy	`oklch(0.38 0.134 355)` Copy	10.62:1 AAA	1.98:1 fail
95	`#ffedf3` Copy	`oklch(0.96 0.021 355)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdce9` Copy	`oklch(0.93 0.042 355)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb4d1` Copy	`oklch(0.85 0.094 355)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ef92b7` Copy	`oklch(0.77 0.120 355)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d9759f` Copy	`oklch(0.69 0.134 355)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b6557f` Copy	`oklch(0.58 0.134 355)` Copy	4.59:1 AA	4.58:1 AA
40	`#953762` Copy	`oklch(0.48 0.134 355)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#79274d` Copy	`oklch(0.41 0.120 355)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5b1a39` Copy	`oklch(0.33 0.100 355)` Copy	12.7:1 AAA	1.65:1 fail
10	`#390d22` Copy	`oklch(0.24 0.074 355)` Copy	16.7:1 AAA	1.26:1 fail
05	`#250815` Copy	`oklch(0.19 0.054 355)` Copy	18.7:1 AAA	1.12:1 fail

AccentDusk Blue

#355070 oklch(0.42 0.063 253)

Step	Hex	OKLCH	vs White	vs Black
Base	`#355070` Copy	`oklch(0.42 0.063 253)` Copy	8.29:1 AAA	2.53:1 fail
95	`#e9f3ff` Copy	`oklch(0.96 0.020 253)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d6e7fc` Copy	`oklch(0.92 0.035 253)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b4cce8` Copy	`oklch(0.84 0.047 253)` Copy	1.65:1 fail	12.7:1 AAA
70	`#96b1d2` Copy	`oklch(0.75 0.057 253)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7a97bb` Copy	`oklch(0.67 0.063 253)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5b789a` Copy	`oklch(0.56 0.063 253)` Copy	4.59:1 AA	4.58:1 AA
40	`#405b7c` Copy	`oklch(0.46 0.063 253)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2f4763` Copy	`oklch(0.39 0.057 253)` Copy	9.5:1 AAA	2.21:1 fail
20	`#21344a` Copy	`oklch(0.32 0.047 253)` Copy	12.7:1 AAA	1.65:1 fail
10	`#121f2e` Copy	`oklch(0.23 0.035 253)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0a131d` Copy	`oklch(0.18 0.025 253)` Copy	18.7:1 AAA	1.12:1 fail

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

#dde1e4 oklch(0.91 0.006 240)

Step	Hex	OKLCH	vs White	vs Black
Base	`#dde1e4` Copy	`oklch(0.91 0.006 240)` Copy	1.32:1 fail	15.96:1 AAA
95	`#f0f2f3` Copy	`oklch(0.96 0.002 240)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e3e6e7` Copy	`oklch(0.92 0.003 240)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c7cacc` Copy	`oklch(0.84 0.004 240)` Copy	1.65:1 fail	12.7:1 AAA
70	`#abafb1` Copy	`oklch(0.75 0.005 240)` Copy	2.21:1 fail	9.5:1 AAA
60	`#929598` Copy	`oklch(0.67 0.006 240)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#727679` Copy	`oklch(0.56 0.006 240)` Copy	4.59:1 AA	4.58:1 AA
40	`#565a5c` Copy	`oklch(0.46 0.006 240)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#434648` Copy	`oklch(0.39 0.005 240)` Copy	9.5:1 AAA	2.21:1 fail
20	`#313335` Copy	`oklch(0.32 0.004 240)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1d1e1f` Copy	`oklch(0.23 0.003 240)` Copy	16.7:1 AAA	1.26:1 fail
05	`#111213` Copy	`oklch(0.18 0.002 240)` Copy	18.7:1 AAA	1.12:1 fail

SuccessForrest Green

#4d8b31 oklch(0.57 0.139 137)

Step	Hex	OKLCH	vs White	vs Black
Base	`#4d8b31` Copy	`oklch(0.57 0.139 137)` Copy	4.16:1 AA-lg	5.05:1 AA
95	`#dff9d5` Copy	`oklch(0.96 0.056 137)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cbf0be` Copy	`oklch(0.92 0.077 137)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a6d693` Copy	`oklch(0.83 0.104 137)` Copy	1.65:1 fail	12.7:1 AAA
70	`#84bd6d` Copy	`oklch(0.74 0.125 137)` Copy	2.21:1 fail	9.5:1 AAA
60	`#65a44b` Copy	`oklch(0.66 0.139 137)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#468429` Copy	`oklch(0.55 0.139 137)` Copy	4.59:1 AA	4.58:1 AA
40	`#296600` Copy	`oklch(0.45 0.138 137)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1f5000` Copy	`oklch(0.38 0.117 137)` Copy	9.5:1 AAA	2.21:1 fail
20	`#153b00` Copy	`oklch(0.31 0.095 137)` Copy	12.7:1 AAA	1.65:1 fail
10	`#092300` Copy	`oklch(0.23 0.070 137)` Copy	16.7:1 AAA	1.26:1 fail
05	`#041600` Copy	`oklch(0.18 0.055 137)` Copy	18.7:1 AAA	1.12:1 fail

WarningBright Amber

#efca08 oklch(0.85 0.173 96)

Step	Hex	OKLCH	vs White	vs Black
Base	`#efca08` Copy	`oklch(0.85 0.173 96)` Copy	1.6:1 fail	13.12:1 AAA
95	`#fff2be` Copy	`oklch(0.96 0.068 96)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f8e59b` Copy	`oklch(0.92 0.095 96)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e3c85d` Copy	`oklch(0.84 0.130 96)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ccac00` Copy	`oklch(0.75 0.154 96)` Copy	2.21:1 fail	9.5:1 AAA
60	`#af9300` Copy	`oklch(0.67 0.138 96)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8a7400` Copy	`oklch(0.56 0.116 96)` Copy	4.59:1 AA	4.58:1 AA
40	`#6a5800` Copy	`oklch(0.46 0.095 96)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#534500` Copy	`oklch(0.39 0.081 96)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3d3200` Copy	`oklch(0.32 0.066 96)` Copy	12.7:1 AAA	1.65:1 fail
10	`#251d00` Copy	`oklch(0.23 0.048 96)` Copy	16.7:1 AAA	1.26:1 fail
05	`#171200` Copy	`oklch(0.18 0.038 96)` Copy	18.7:1 AAA	1.12:1 fail

DangerStrawberry Red

#fb3640 oklch(0.65 0.230 24)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fb3640` Copy	`oklch(0.65 0.230 24)` Copy	3.68:1 AA-lg	5.7:1 AA
95	`#ffeeec` Copy	`oklch(0.96 0.019 24)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedb` Copy	`oklch(0.93 0.038 24)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b1` Copy	`oklch(0.85 0.084 24)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8e88` Copy	`oklch(0.77 0.138 24)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5e5c` Copy	`oklch(0.69 0.197 24)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e7192f` Copy	`oklch(0.59 0.230 24)` Copy	4.59:1 AA	4.58:1 AA
40	`#b6001e` Copy	`oklch(0.49 0.198 24)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910016` Copy	`oklch(0.41 0.167 24)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d000e` Copy	`oklch(0.34 0.136 24)` Copy	12.7:1 AAA	1.65:1 fail
10	`#450005` Copy	`oklch(0.25 0.100 24)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0003` Copy	`oklch(0.19 0.079 24)` Copy	18.7:1 AAA	1.12:1 fail

Baby Blue Ice

#a4bef3 oklch(0.80 0.081 264)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a4bef3` Copy	`oklch(0.80 0.081 264)` Copy	1.87:1 fail	11.24:1 AAA
95	`#ebf2ff` Copy	`oklch(0.96 0.019 264)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d9e6ff` Copy	`oklch(0.92 0.037 264)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b6caf2` Copy	`oklch(0.84 0.061 264)` Copy	1.65:1 fail	12.7:1 AAA
70	`#98afde` Copy	`oklch(0.75 0.073 264)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7c95c8` Copy	`oklch(0.67 0.081 264)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5e75a6` Copy	`oklch(0.56 0.081 264)` Copy	4.59:1 AA	4.58:1 AA
40	`#435987` Copy	`oklch(0.47 0.081 264)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#32456d` Copy	`oklch(0.39 0.073 264)` Copy	9.5:1 AAA	2.21:1 fail
20	`#233252` Copy	`oklch(0.32 0.061 264)` Copy	12.7:1 AAA	1.65:1 fail
10	`#131e33` Copy	`oklch(0.24 0.044 264)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0b1221` Copy	`oklch(0.18 0.032 264)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Crimson Violet

Alabaster Grey

Forrest Green

Bright Amber

Strawberry Red

Baby Blue Ice

Dusk Blue

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Crimson Violet

Alabaster Grey

Forrest Green

Bright Amber

Strawberry Red

Baby Blue Ice

Dusk Blue

Progress & Controls

Notifications

← Key

Key →

Brand · Crimson Violet

Brand

Accent · Dusk Blue

Accent

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

Neutral

Success · Forrest Green

Success

Warning · Bright Amber

Warning

Danger · Strawberry Red

Danger

Baby Blue Ice

Unassigned

BrandCrimson Violet

AccentDusk Blue

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

SuccessForrest Green

WarningBright Amber

DangerStrawberry Red