色名 · #EDD924
Spectacular Saffron
Spectacular Saffronは#EDD924：rgb(237 217 36)、hsl(54 85% 54%)、oklch(0.875 0.177 102.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Spectacular Saffron color name →
#EDD924
oklch(0.875 0.177 102.4)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- EFDD4E
- F0E169
- F2E680
- F4E995
- F5EDA8
- F7F1BA
- F9F5CC
- FBF8DD
- FDFCEE
シェード
- CEBC1E
- B0A118
- 938612
- 776C0C
- 5C5307
- 423B04
- 2A2502
- 141100
- 030200
トーン
- E1D03D
- D6C74D
- CBBE59
- C0B562
- B5AC69
- AAA470
- 9F9B75
- 949279
- 8A897D
カラーハーモニー
補色 +180°
- EDD924
Spectacular Saffron
- CFD1FF
≈ Pale Phthalo Blue
類似色 -30° +30°
- EDD924
Spectacular Saffron
- FFCC8B
≈ Bastard Amber
- A8EE6B
≈ Inchworm
トライアド +120° +240°
- EDD924
Spectacular Saffron
- 94E3FF
≈ Winter Wizard
- FFC0E6
≈ Pretty in Pink
スプリットコンプリメンタリー +150° +210°
- EDD924
Spectacular Saffron
- B9D9FF
≈ Broad Daylight
- E9C6FF
≈ Wisteria Powder
テトラード +90° +180° +270°
- EDD924
Spectacular Saffron
- 00F4F0
≈ Aqua Cyan
- CFD1FF
≈ Pale Phthalo Blue
- FFC4CA
≈ Rubber Rose
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.44:1 · APCA Lc 21
Ag
AAA黒の上
WCAG 14.55:1 · APCA Lc 82
最適な文字色: #000000
WCAG 14.55:1 (AAA) · APCA Lc 82
Contrast pairs
コードスニペット
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);
}