Cor nomeada · #EDD924
Spectacular Saffron
Spectacular Saffron é #EDD924: rgb(237 217 36), hsl(54 85% 54%), oklch(0.875 0.177 102.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Spectacular Saffron color name →
#EDD924
oklch(0.875 0.177 102.4)
Conversões de cor
- HEX
- #edd924
- RGB
- rgb(237 217 36)
- HSL
- hsl(54 85% 54%)
- HWB
- hwb(54 14% 7%)
- OKLCH
- oklch(0.875 0.177 102.4)
- OKLab
- oklab(0.875 -0.038 0.173)
- CIE Lab
- lab(86.35 -5.24 80.29)
- LCH
- lch(86.35 80.46 93.7)
- CMYK
- cmyk(0% 8% 85% 7%)
Tons claros · Sombras · Tons
Tons claros
- EFDD4E
- F0E169
- F2E680
- F4E995
- F5EDA8
- F7F1BA
- F9F5CC
- FBF8DD
- FDFCEE
Sombras
- CEBC1E
- B0A118
- 938612
- 776C0C
- 5C5307
- 423B04
- 2A2502
- 141100
- 030200
Tons
- E1D03D
- D6C74D
- CBBE59
- C0B562
- B5AC69
- AAA470
- 9F9B75
- 949279
- 8A897D
Harmonias de cor
Complementar +180°
- EDD924
Spectacular Saffron
- CFD1FF
≈ Pale Phthalo Blue
Análoga -30° +30°
- EDD924
Spectacular Saffron
- FFCC8B
≈ Bastard Amber
- A8EE6B
≈ Inchworm
Tríade +120° +240°
- EDD924
Spectacular Saffron
- 94E3FF
≈ Winter Wizard
- FFC0E6
≈ Pretty in Pink
Complementar dividida +150° +210°
- EDD924
Spectacular Saffron
- B9D9FF
≈ Broad Daylight
- E9C6FF
≈ Wisteria Powder
Tétrade +90° +180° +270°
- EDD924
Spectacular Saffron
- 00F4F0
≈ Aqua Cyan
- CFD1FF
≈ Pale Phthalo Blue
- FFC4CA
≈ Rubber Rose
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.44:1 · APCA Lc 21
Ag
AAASobre preto
WCAG 14.55:1 · APCA Lc 82
Melhor cor de texto: #000000
WCAG 14.55:1 (AAA) · APCA Lc 82
Contrast pairs
Trechos de código
CSS
:root {
--spectacular-saffron: #edd924;
--spectacular-saffron-rgb: 237 217 36;
--spectacular-saffron-oklch: oklch(0.875 0.177 102.4);
}
.element {
color: var(--spectacular-saffron);
background-color: hsl(54 85% 54%);
border-color: oklch(0.875 0.177 102.4);
}Tailwind CSS v4
@theme {
--color-spectacular-saffron: #edd924;
--color-spectacular-saffron-50: #fdf9be;
--color-spectacular-saffron-100: #f1eca6;
--color-spectacular-saffron-200: #e0d87c;
--color-spectacular-saffron-300: #c6bb40;
--color-spectacular-saffron-400: #b4a000;
--color-spectacular-saffron-500: #9f8700;
--color-spectacular-saffron-600: #867200;
--color-spectacular-saffron-700: #6b5b00;
--color-spectacular-saffron-800: #514200;
--color-spectacular-saffron-900: #382d00;
--color-spectacular-saffron-950: #231a00;
}SCSS
$spectacular-saffron: #edd924;
$spectacular-saffron-rgb: 237, 217, 36;
$spectacular-saffron-light: mix(#fff, $spectacular-saffron, 20%);
$spectacular-saffron-dark: mix(#000, $spectacular-saffron, 20%);
.element {
color: $spectacular-saffron;
box-shadow: 0 0 0 2px rgba($spectacular-saffron, 0.35);
}