色名 · #F8E462
Goldfinch
Goldfinchは#F8E462：rgb(248 228 98)、hsl(52 91% 68%)、oklch(0.911 0.15 100.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Goldfinch color name →
#F8E462
oklch(0.911 0.15 100.6)
カラー変換
- HEX
- #f8e462
- RGB
- rgb(248 228 98)
- HSL
- hsl(52 91% 68%)
- HWB
- hwb(52 38% 3%)
- OKLCH
- oklch(0.911 0.15 100.6)
- OKLab
- oklab(0.911 -0.028 0.147)
- CIE Lab
- lab(90.43 -3.98 64.1)
- LCH
- lch(90.43 64.22 93.6)
- CMYK
- cmyk(0% 8% 60% 3%)
ティント · シェード · トーン
ティント
- F9E776
- F9EA89
- FAED99
- FAF0A9
- FBF2B8
- FCF5C7
- FDF8D5
- FDFAE3
- FEFDF1
シェード
- D8C654
- B8A947
- 9A8D3A
- 7C722D
- 605821
- 453F16
- 2C280B
- 151203
- 030300
トーン
- EBDA69
- DFD06E
- D2C673
- C6BB77
- BAB17A
- AEA77C
- A29E7E
- 97947F
- 8B8A80
カラーハーモニー
補色 +180°
- F8E462
Goldfinch
- DCDFFF
≈ Contrail
類似色 -30° +30°
- F8E462
Goldfinch
- FFDBB1
≈ Feather Plume
- BFF688
≈ Pistachio Mousse
トライアド +120° +240°
- F8E462
Goldfinch
- B4ECFF
≈ Ice Effect
- FFD2EE
≈ Shampoo
スプリットコンプリメンタリー +150° +210°
- F8E462
Goldfinch
- CCE5FF
≈ Fresh Water
- EED7FF
≈ Lavender Savour
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.29:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.26:1 · APCA Lc 89
最適な文字色: #000000
WCAG 16.26:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--goldfinch: #f8e462;
--goldfinch-rgb: 248 228 98;
--goldfinch-oklch: oklch(0.911 0.15 100.6);
}
.element {
color: var(--goldfinch);
background-color: hsl(52 91% 68%);
border-color: oklch(0.911 0.15 100.6);
}Tailwind CSS v4
@theme {
--color-goldfinch: #f8e462;
--color-goldfinch-50: #fdf8c6;
--color-goldfinch-100: #f1ebb1;
--color-goldfinch-200: #e0d78b;
--color-goldfinch-300: #c6ba59;
--color-goldfinch-400: #b3a012;
--color-goldfinch-500: #9d8600;
--color-goldfinch-600: #857200;
--color-goldfinch-700: #6a5b00;
--color-goldfinch-800: #504200;
--color-goldfinch-900: #382d00;
--color-goldfinch-950: #221a00;
}SCSS
$goldfinch: #f8e462;
$goldfinch-rgb: 248, 228, 98;
$goldfinch-light: mix(#fff, $goldfinch, 20%);
$goldfinch-dark: mix(#000, $goldfinch, 20%);
.element {
color: $goldfinch;
box-shadow: 0 0 0 2px rgba($goldfinch, 0.35);
}