Customizer - Spektral UI

50 C

0.150 H

270° A

100%

HEX

RGBA rgba(67, 90, 184, 1.00)

OKLCH 50.0% 0.150 270.0°

bg #374334 37 0.036 136

base #366336 45 0.102 140

hover #48783e 52 0.120 137

muted #81a978 69 0.098 137

Aa text #ffffff 100 0.006 119

Sepia

bg #aab9a7 77 0.038 136

base #366336 45 0.102 140

hover #215016 38 0.121 137

muted #2d5125 40 0.097 137

Aa text #ffffff 100 0.006 119

Carbon

Tone Carbon

--tone-ghost #393939 34 0.002 119

--tone-bg #1a1a1a 22 0.001 119

--tone #282828 28 0.002 119

--tone-hover #393a39 35 0.004 132

--tone-muted #9e9e9d 70 0.006 116

Aa --text #ffffff 100 0.006 119

Aa --text-muted #9e9e9e 70 0.004 119

Tone Sepia

--tone-ghost #c2bbab 79 0.031 95

--tone-bg #e8e4d8 92 0.024 100

--tone #d0c9b8 84 0.032 96

--tone-hover #b9b49d 77 0.041 102

--tone-muted #4c4839 40 0.030 100

Aa --text #1c1917 22 0.007 69

Aa --text-muted #484848 40 0.002 119

accent Carbon

--accent-bg #374334 37 0.036 136

--accent #366336 45 0.102 140

--accent-hover #48783e 52 0.120 137

--accent-muted #81a978 69 0.098 137

Aa --text-accent #ffffff 100 0.006 119

accent Sepia

--accent-bg #aab9a7 77 0.038 136

--accent #366336 45 0.102 140

--accent-hover #215016 38 0.121 137

--accent-muted #2d5125 40 0.097 137

Aa --text-accent #ffffff 100 0.006 119

error Carbon

--error-bg #563439 37 0.049 11

--error #f26a84 70 0.169 10

--error-hover #ff8a9e 77 0.142 10

--error-muted #ea7d8f 72 0.135 11

Aa --text-error #1c1917 22 0.007 69

error Sepia

--error-bg #d2a7ac 77 0.050 14

--error #f26a84 70 0.169 10

--error-hover #d95370 63 0.170 9

--error-muted #86223c 42 0.136 9

Aa --text-error #1c1917 22 0.007 69

warning Carbon

--warning-bg #4c3d20 37 0.057 89

--warning #ca8a04 68 0.162 82

--warning-hover #dea300 75 0.181 88

--warning-muted #c7962c 70 0.152 88

Aa --text-warning #1c1917 22 0.007 69

warning Sepia

--warning-bg #c3b191 77 0.058 89

--warning #ca8a04 68 0.162 82

--warning-hover #a97a00 61 0.147 88

--warning-muted #604300 40 0.097 87

Aa --text-warning #1c1917 22 0.007 69

success Carbon

--success-bg #2b453f 37 0.036 173

--success #2da796 66 0.111 177

--success-hover #48bea7 73 0.117 173

--success-muted #56ad9a 69 0.095 173

Aa --text-success #1c1917 22 0.007 69

success Sepia

--success-bg #9ebbb3 77 0.038 168

--success #2da796 66 0.111 177

--success-hover #00927c 59 0.115 173

--success-muted #005245 39 0.076 173

Aa --text-success #1c1917 22 0.007 69

info Carbon

--info-bg #2c4156 37 0.047 251

--info #379de7 67 0.148 247

--info-hover #59b2ff 74 0.146 250

--info-muted #5ca4e3 70 0.122 249

Aa --text-info #1c1917 22 0.007 69

info Sepia

--info-bg #9eb7cf 77 0.044 247

--info #379de7 67 0.148 247

--info-hover #1e86d4 60 0.155 250

--info-muted #004b7f 40 0.113 251

Aa --text-info #1c1917 22 0.007 69

neutral Carbon

--neutral-bg #3c3f45 37 0.010 262

--neutral #8a99ae 68 0.035 257

--neutral-hover #9fafc4 75 0.035 255

--neutral-muted #93a0b0 70 0.027 252

Aa --text-neutral #1c1917 22 0.007 69

neutral Sepia

--neutral-bg #b0b4bb 77 0.008 248

--neutral #8a99ae 68 0.035 257

--neutral-hover #758498 61 0.035 256

--neutral-muted #3f4958 40 0.029 259

Aa --text-neutral #1c1917 22 0.007 69

■ AAA ≥ 7:1 ■ AA ≥ 4.5:1 ■ AA Large ≥ 3:1 ■ Fail < 3:1 ■

Carbon

tone-bg #1a1a1a

tone #282828

tone-hover #393a39

tone / tone-bg 1.18

tone-hover / tone-bg 1.52

tone-hover / tone 1.29

Sepia

tone-bg #e8e4d8

tone #d0c9b8

tone-hover #b9b49d

tone / tone-bg 1.30

tone-hover / tone-bg 1.64

tone-hover / tone 1.26

Carbon

text / tone-bg 17.40 AAA

text / tone 14.74 AAA

text / tone-hover 11.42 AAA

text-muted / tone 5.50 AA

text-muted / tone-bg 6.50 AA

tone-muted / tone 5.50 AA

Sepia

text / tone-bg 13.76 AAA

text / tone 10.60 AAA

text / tone-hover 8.39 AAA

text-muted / tone 5.54 AA

text-muted / tone-bg 7.19 AAA

tone-muted / tone 5.55 AA

accent · Carbon #366336

text-accent / accent 7.01 AAA

text-accent / accent-hover 5.21 AA

accent-muted / tone 5.53 AA

accent-muted / tone-bg 6.53 AA

Text / accent-bg 10.42 AAA

accent-muted / accent-bg 3.91 AA Large

accent · Sepia #366336

text-accent / accent 7.01 AAA

text-accent / accent-hover 9.44 AAA

accent-muted / tone 5.50 AA

accent-muted / tone-bg 7.14 AAA

Text / accent-bg 8.50 AAA

accent-muted / accent-bg 4.41 AA Large

error · Carbon #f26a84

text-error / error 5.97 AA

text-error / error-hover 7.81 AAA

error-muted / tone 5.50 AA

error-muted / tone-bg 6.49 AA

Text / error-bg 10.79 AAA

error-muted / error-bg 4.02 AA Large

error · Sepia #f26a84

text-error / error 5.97 AA

text-error / error-hover 4.52 AA

error-muted / tone 5.52 AA

error-muted / tone-bg 7.16 AAA

Text / error-bg 8.21 AAA

error-muted / error-bg 4.27 AA Large

warning · Carbon #ca8a04

text-warning / warning 5.95 AA

text-warning / warning-hover 7.78 AAA

warning-muted / tone 5.50 AA

warning-muted / tone-bg 6.49 AA

Text / warning-bg 10.52 AAA

warning-muted / warning-bg 3.92 AA Large

warning · Sepia #ca8a04

text-warning / warning 5.95 AA

text-warning / warning-hover 4.56 AA

warning-muted / tone 5.53 AA

warning-muted / tone-bg 7.18 AAA

Text / warning-bg 8.34 AAA

warning-muted / warning-bg 4.36 AA Large

success · Carbon #2da796

text-success / success 5.90 AA

text-success / success-hover 7.66 AAA

success-muted / tone 5.50 AA

success-muted / tone-bg 6.50 AA

Text / success-bg 10.37 AAA

success-muted / success-bg 3.87 AA Large

success · Sepia #2da796

text-success / success 5.90 AA

text-success / success-hover 4.50 AA

success-muted / tone 5.55 AA

success-muted / tone-bg 7.21 AAA

Text / success-bg 8.51 AAA

success-muted / success-bg 4.45 AA Large

info · Carbon #379de7

text-info / info 5.95 AA

text-info / info-hover 7.69 AAA

info-muted / tone 5.53 AA

info-muted / tone-bg 6.53 AA

Text / info-bg 10.51 AAA

info-muted / info-bg 3.94 AA Large

info · Sepia #379de7

text-info / info 5.95 AA

text-info / info-hover 4.51 AA

info-muted / tone 5.50 AA

info-muted / tone-bg 7.14 AAA

Text / info-bg 8.43 AAA

info-muted / info-bg 4.38 AA Large

neutral · Carbon #8a99ae

text-neutral / neutral 6.04 AA

text-neutral / neutral-hover 7.83 AAA

neutral-muted / tone 5.54 AA

neutral-muted / tone-bg 6.54 AA

Text / neutral-bg 10.56 AAA

neutral-muted / neutral-bg 3.97 AA Large

neutral · Sepia #8a99ae

text-neutral / neutral 6.04 AA

text-neutral / neutral-hover 4.59 AA

neutral-muted / tone 5.52 AA

neutral-muted / tone-bg 7.17 AAA

Text / neutral-bg 8.40 AAA

neutral-muted / neutral-bg 4.38 AA Large

Surface

Text / tone-bg Aa

Text / tone Aa

Text / tone-hover Aa

Text Muted / tone Aa

Tone Muted / tone Aa

Accent

base Aa

hover Aa

card Aa

bg Aa

Text/Accent-bg Aa

muted/Accent-bg Aa

Contextual

Surface

Text / tone-bg Aa

Text / tone Aa

Text / tone-hover Aa

Text Muted / tone Aa

Tone Muted / tone Aa

Accent

base Aa

hover Aa

card Aa

bg Aa

Text/Accent-bg Aa

muted/Accent-bg Aa

Contextual

Surface

Text / tone-bg Aa

Text / tone Aa

Text / tone-hover Aa

Text Muted / tone Aa

Tone Muted / tone Aa

Accent

base Aa

hover Aa

card Aa

bg Aa

Text/Accent-bg Aa

muted/Accent-bg Aa

Contextual

Surface

Text / tone-bg Aa

Text / tone Aa

Text / tone-hover Aa

Text Muted / tone Aa

Tone Muted / tone Aa

Accent

base Aa

hover Aa

card Aa

bg Aa

Text/Accent-bg Aa

muted/Accent-bg Aa

Contextual