色名 · #FFF4A1
Candle Flame
Candle Flameは#FFF4A1：rgb(255 244 161)、hsl(53 100% 82%)、oklch(0.957 0.104 101.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Candle Flame color name →
#FFF4A1
oklch(0.957 0.104 101.6)
カラー変換
- HEX
- #fff4a1
- RGB
- rgb(255 244 161)
- HSL
- hsl(53 100% 82%)
- HWB
- hwb(53 63% 0%)
- OKLCH
- oklch(0.957 0.104 101.6)
- OKLab
- oklab(0.957 -0.021 0.102)
- CIE Lab
- lab(95.69 -4.76 41.41)
- LCH
- lch(95.69 41.68 96.6)
- CMYK
- cmyk(0% 4% 37% 0%)
ティント · シェード · トーン
ティント
- FFF5AB
- FFF7B5
- FFF8BF
- FFF9C9
- FFFAD2
- FFFBDB
- FFFCE4
- FFFDED
- FFFEF6
シェード
- DED48B
- BEB576
- 9E9762
- 807A4E
- 635E3C
- 48442A
- 2E2B19
- 161409
- 030301
トーン
- F2E89E
- E4DC9C
- D7D099
- CAC496
- BDB993
- B1AD8F
- A4A28C
- 989688
- 8C8B84
カラーハーモニー
補色 +180°
- FFF4A1
Candle Flame
- EEF0FF
≈ Carte Blanche
類似色 -30° +30°
- FFF4A1
Candle Flame
- FFEEDA
≈ Sand Crystal
- DAFFBC
≈ Greedy Green
トライアド +120° +240°
- FFF4A1
Candle Flame
- DDF6FF
≈ Glacial Day
- FFEAF6
≈ Fairy Dust
スプリットコンプリメンタリー +150° +210°
- FFF4A1
Candle Flame
- E7F2FF
≈ Cotton Boll
- F7ECFF
≈ Placebo Fuchsia
テトラード +90° +180° +270°
- FFF4A1
Candle Flame
- C1FFFB
≈ Crushed Ice
- EEF0FF
≈ Carte Blanche
- FFEBED
≈ Just Pink Enough
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.12:1 · APCA Lc 0
Ag
AAA黒の上
WCAG 18.70:1 · APCA Lc 99
最適な文字色: #000000
WCAG 18.70:1 (AAA) · APCA Lc 99
Contrast pairs
コードスニペット
CSS
:root {
--candle-flame: #fff4a1;
--candle-flame-rgb: 255 244 161;
--candle-flame-oklch: oklch(0.957 0.104 101.6);
}
.element {
color: var(--candle-flame);
background-color: hsl(53 100% 82%);
border-color: oklch(0.957 0.104 101.6);
}Tailwind CSS v4
@theme {
--color-candle-flame: #fff4a1;
--color-candle-flame-50: #faf7d5;
--color-candle-flame-100: #edeac3;
--color-candle-flame-200: #dbd7a4;
--color-candle-flame-300: #c0ba7b;
--color-candle-flame-400: #aba154;
--color-candle-flame-500: #958828;
--color-candle-flame-600: #7e7324;
--color-candle-flame-700: #655c1d;
--color-candle-flame-800: #4b4312;
--color-candle-flame-900: #342e0b;
--color-candle-flame-950: #201b01;
}SCSS
$candle-flame: #fff4a1;
$candle-flame-rgb: 255, 244, 161;
$candle-flame-light: mix(#fff, $candle-flame, 20%);
$candle-flame-dark: mix(#000, $candle-flame, 20%);
.element {
color: $candle-flame;
box-shadow: 0 0 0 2px rgba($candle-flame, 0.35);
}