Brand
#00483e
oklch(0.36 0.065 180)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#00483e
|
oklch(0.36 0.065 180)
|
|
|
|
| 95 |
#dff7f1
|
oklch(0.96 0.026 180)
|
|
|
|
| 90 |
#cbece4
|
oklch(0.92 0.036 180)
|
|
|
|
| 80 |
#a6d2c8
|
oklch(0.83 0.049 180)
|
|
|
|
| 70 |
#83b9ad
|
oklch(0.74 0.059 180)
|
|
|
|
| 60 |
#64a094
|
oklch(0.66 0.066 180)
|
|
|
|
| 50 |
#448074
|
oklch(0.56 0.066 180)
|
|
|
|
| 40 |
#266358
|
oklch(0.46 0.066 180)
|
|
|
|
| 30 |
#174e45
|
oklch(0.38 0.059 180)
|
|
|
|
| 20 |
#0d3932
|
oklch(0.31 0.049 180)
|
|
|
|
| 10 |
#05221d
|
oklch(0.23 0.036 180)
|
|
|
|
| 05 |
#041512
|
oklch(0.18 0.026 180)
|
|
|
Accent
#ea7246
oklch(0.69 0.160 40)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ea7246
|
oklch(0.69 0.160 40)
|
|
|
|
| 95 |
#ffeee9
|
oklch(0.96 0.020 40)
|
|
|
|
| 90 |
#ffdfd3
|
oklch(0.93 0.040 40)
|
|
|
|
| 80 |
#ffb9a0
|
oklch(0.84 0.089 40)
|
|
|
|
| 70 |
#ff916a
|
oklch(0.77 0.144 40)
|
|
|
|
| 60 |
#ea7246
|
oklch(0.69 0.160 40)
|
|
|
|
| 50 |
#c55123
|
oklch(0.58 0.160 40)
|
|
|
|
| 40 |
#a03500
|
oklch(0.48 0.150 40)
|
|
|
|
| 30 |
#7f2900
|
oklch(0.41 0.127 40)
|
|
|
|
| 20 |
#5f1c00
|
oklch(0.33 0.104 40)
|
|
|
|
| 10 |
#3c0e00
|
oklch(0.24 0.076 40)
|
|
|
|
| 05 |
#290700
|
oklch(0.19 0.060 40)
|
|
|
Neutral
0.124
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#787573
oklch(0.56 0.005 56)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#787573
|
oklch(0.56 0.005 56)
|
|
|
|
| 95 |
#f3f1f1
|
oklch(0.96 0.002 56)
|
|
|
|
| 90 |
#e7e5e4
|
oklch(0.92 0.003 56)
|
|
|
|
| 80 |
#cbc9c7
|
oklch(0.84 0.004 56)
|
|
|
|
| 70 |
#b1aeac
|
oklch(0.75 0.004 56)
|
|
|
|
| 60 |
#979492
|
oklch(0.67 0.005 56)
|
|
|
|
| 50 |
#787573
|
oklch(0.56 0.005 56)
|
|
|
|
| 40 |
#5b5957
|
oklch(0.46 0.005 56)
|
|
|
|
| 30 |
#484544
|
oklch(0.39 0.004 56)
|
|
|
|
| 20 |
#343231
|
oklch(0.32 0.004 56)
|
|
|
|
| 10 |
#1f1e1d
|
oklch(0.24 0.003 56)
|
|
|
|
| 05 |
#131211
|
oklch(0.18 0.002 56)
|
|
|
SuccessLys grøn
#63b375
oklch(0.70 0.120 150)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#63b375
|
oklch(0.70 0.120 150)
|
|
|
|
| 95 |
#dafadf
|
oklch(0.96 0.048 150)
|
|
|
|
| 90 |
#c5f0cc
|
oklch(0.92 0.066 150)
|
|
|
|
| 80 |
#9cd7a7
|
oklch(0.83 0.090 150)
|
|
|
|
| 70 |
#77be86
|
oklch(0.74 0.108 150)
|
|
|
|
| 60 |
#55a568
|
oklch(0.66 0.120 150)
|
|
|
|
| 50 |
#33854a
|
oklch(0.55 0.120 150)
|
|
|
|
| 40 |
#0b672e
|
oklch(0.45 0.120 150)
|
|
|
|
| 30 |
#005121
|
oklch(0.38 0.106 150)
|
|
|
|
| 20 |
#003c16
|
oklch(0.31 0.086 150)
|
|
|
|
| 10 |
#00240a
|
oklch(0.23 0.064 150)
|
|
|
|
| 05 |
#001705
|
oklch(0.18 0.048 150)
|
|
|
Warning
#fff075
oklch(0.94 0.144 102)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fff075
|
oklch(0.94 0.144 102)
|
|
|
|
| 95 |
#f8f3c7
|
oklch(0.96 0.058 102)
|
|
|
|
| 90 |
#eee7aa
|
oklch(0.92 0.079 102)
|
|
|
|
| 80 |
#d6cb76
|
oklch(0.83 0.108 102)
|
|
|
|
| 70 |
#beb042
|
oklch(0.75 0.130 102)
|
|
|
|
| 60 |
#a59600
|
oklch(0.67 0.140 102)
|
|
|
|
| 50 |
#837700
|
oklch(0.56 0.118 102)
|
|
|
|
| 40 |
#635a00
|
oklch(0.46 0.097 102)
|
|
|
|
| 30 |
#4e4600
|
oklch(0.39 0.082 102)
|
|
|
|
| 20 |
#393300
|
oklch(0.32 0.067 102)
|
|
|
|
| 10 |
#221e00
|
oklch(0.23 0.049 102)
|
|
|
|
| 05 |
#161300
|
oklch(0.18 0.039 102)
|
|
|
Danger
#b6000e
oklch(0.49 0.199 28)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#b6000e
|
oklch(0.49 0.199 28)
|
|
|
|
| 95 |
#ffeeec
|
oklch(0.96 0.019 28)
|
|
|
|
| 90 |
#ffded9
|
oklch(0.93 0.038 28)
|
|
|
|
| 80 |
#ffb8ae
|
oklch(0.85 0.085 28)
|
|
|
|
| 70 |
#ff8f82
|
oklch(0.77 0.138 28)
|
|
|
|
| 60 |
#ff5f53
|
oklch(0.69 0.198 28)
|
|
|
|
| 50 |
#da3832
|
oklch(0.59 0.199 28)
|
|
|
|
| 40 |
#b6000e
|
oklch(0.49 0.199 28)
|
|
|
|
| 30 |
#910009
|
oklch(0.41 0.169 28)
|
|
|
|
| 20 |
#6d0005
|
oklch(0.34 0.138 28)
|
|
|
|
| 10 |
#460002
|
oklch(0.25 0.101 28)
|
|
|
|
| 05 |
#2f0001
|
oklch(0.19 0.079 28)
|
|
|
Lys accent
#946c5c
oklch(0.57 0.057 43)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#946c5c
|
oklch(0.57 0.057 43)
|
|
|
|
| 95 |
#ffeee8
|
oklch(0.96 0.020 43)
|
|
|
|
| 90 |
#fae0d6
|
oklch(0.92 0.031 43)
|
|
|
|
| 80 |
#e4c2b5
|
oklch(0.84 0.043 43)
|
|
|
|
| 70 |
#cda697
|
oklch(0.76 0.051 43)
|
|
|
|
| 60 |
#b68c7b
|
oklch(0.68 0.057 43)
|
|
|
|
| 50 |
#946c5c
|
oklch(0.57 0.057 43)
|
|
|
|
| 40 |
#765041
|
oklch(0.47 0.057 43)
|
|
|
|
| 30 |
#5f3e31
|
oklch(0.40 0.051 43)
|
|
|
|
| 20 |
#462c22
|
oklch(0.32 0.043 43)
|
|
|
|
| 10 |
#2b1a13
|
oklch(0.24 0.031 43)
|
|
|
|
| 05 |
#1b0f0b
|
oklch(0.18 0.023 43)
|
|
|
Lys brand
#66797f
oklch(0.56 0.024 219)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#66797f
|
oklch(0.56 0.024 219)
|
|
|
|
| 95 |
#ebf3f6
|
oklch(0.96 0.010 219)
|
|
|
|
| 90 |
#dce7eb
|
oklch(0.92 0.013 219)
|
|
|
|
| 80 |
#bdccd1
|
oklch(0.84 0.018 219)
|
|
|
|
| 70 |
#9fb2b7
|
oklch(0.75 0.022 219)
|
|
|
|
| 60 |
#85989f
|
oklch(0.67 0.024 219)
|
|
|
|
| 50 |
#66797f
|
oklch(0.56 0.024 219)
|
|
|
|
| 40 |
#4a5c62
|
oklch(0.46 0.024 219)
|
|
|
|
| 30 |
#38484d
|
oklch(0.39 0.022 219)
|
|
|
|
| 20 |
#283539
|
oklch(0.32 0.018 219)
|
|
|
|
| 10 |
#171f22
|
oklch(0.23 0.013 219)
|
|
|
|
| 05 |
#0d1315
|
oklch(0.18 0.010 219)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls