色名 · #F2E887
King’s Field
King’s Fieldは#F2E887：rgb(242 232 135)、hsl(54 80% 74%)、oklch(0.918 0.119 103.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · King’s Field color name →
#F2E887
oklch(0.918 0.119 103.3)
カラー変換
- HEX
- #f2e887
- RGB
- rgb(242 232 135)
- HSL
- hsl(54 80% 74%)
- HWB
- hwb(54 53% 5%)
- OKLCH
- oklch(0.918 0.119 103.3)
- OKLab
- oklab(0.918 -0.027 0.116)
- CIE Lab
- lab(91.27 -6.11 48.2)
- LCH
- lch(91.27 48.59 97.2)
- CMYK
- cmyk(0% 4% 44% 5%)
ティント · シェード · トーン
ティント
- F3EB95
- F4EDA2
- F6EFAE
- F7F2BA
- F8F4C6
- F9F6D2
- FBF9DD
- FCFBE9
- FEFDF4
シェード
- D2CA75
- B4AC63
- 969051
- 797441
- 5E5931
- 434021
- 2B2913
- 141306
- 030301
トーン
- E6DD88
- DAD388
- CEC888
- C3BD88
- B7B387
- ACA986
- A19E85
- 969484
- 8B8A82
カラーハーモニー
補色 +180°
- F2E887
King’s Field
- E0E1FF
≈ Stoic White
類似色 -30° +30°
- F2E887
King’s Field
- FFDEB5
≈ Tunisian Stone
- C5F6A3
≈ Menthol
トライアド +120° +240°
- F2E887
King’s Field
- BEEDFF
≈ Ice Effect
- FFD7ED
≈ Sweet Sachet
スプリットコンプリメンタリー +150° +210°
- F2E887
King’s Field
- D2E6FF
≈ Veiling Waterfalls
- F1DAFF
≈ Lavender Savour
テトラード +90° +180° +270°
- F2E887
King’s Field
- 75FDFA
≈ Ancient Ice
- E0E1FF
≈ Stoic White
- FFD9DC
≈ Satin Ribbon
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.25:1 · APCA Lc 13
Ag
AAA黒の上
WCAG 16.66:1 · APCA Lc 91
最適な文字色: #000000
WCAG 16.66:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--king-s-field: #f2e887;
--king-s-field-rgb: 242 232 135;
--king-s-field-oklch: oklch(0.918 0.119 103.3);
}
.element {
color: var(--king-s-field);
background-color: hsl(54 80% 74%);
border-color: oklch(0.918 0.119 103.3);
}Tailwind CSS v4
@theme {
--color-king-s-field: #f2e887;
--color-king-s-field-50: #f9f8d1;
--color-king-s-field-100: #edebbd;
--color-king-s-field-200: #dbd89c;
--color-king-s-field-300: #c0bb72;
--color-king-s-field-400: #aba146;
--color-king-s-field-500: #958900;
--color-king-s-field-600: #7e7408;
--color-king-s-field-700: #655d09;
--color-king-s-field-800: #4b4303;
--color-king-s-field-900: #342e03;
--color-king-s-field-950: #201b00;
}SCSS
$king-s-field: #f2e887;
$king-s-field-rgb: 242, 232, 135;
$king-s-field-light: mix(#fff, $king-s-field, 20%);
$king-s-field-dark: mix(#000, $king-s-field, 20%);
.element {
color: $king-s-field;
box-shadow: 0 0 0 2px rgba($king-s-field, 0.35);
}