色名 · #FFEE99
Sparkler
Sparklerは#FFEE99：rgb(255 238 153)、hsl(50 100% 80%)、oklch(0.944 0.107 98.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Sparkler color name →
#FFEE99
oklch(0.944 0.107 98.3)
カラー変換
- HEX
- #ffee99
- RGB
- rgb(255 238 153)
- HSL
- hsl(50 100% 80%)
- HWB
- hwb(50 60% 0%)
- OKLCH
- oklch(0.944 0.107 98.3)
- OKLab
- oklab(0.944 -0.015 0.106)
- CIE Lab
- lab(94.09 -2.56 43.29)
- LCH
- lch(94.09 43.36 93.4)
- CMYK
- cmyk(0% 7% 40% 0%)
ティント · シェード · トーン
ティント
- FFF0A4
- FFF2AF
- FFF4BA
- FFF5C4
- FFF7CE
- FFF9D8
- FFFAE2
- FFFCEC
- FFFDF5
シェード
- DECF84
- BEB170
- 9E935D
- 80774A
- 635C38
- 484227
- 2E2A17
- 161408
- 030301
トーン
- F2E397
- E4D796
- D7CC94
- CAC191
- BDB68F
- B1AB8C
- A4A08A
- 989587
- 8C8B83
カラーハーモニー
補色 +180°
- FFEE99
Sparkler
- E8EBFF
≈ Brilliant White
類似色 -30° +30°
- FFEE99
Sparkler
- FFE8D1
≈ Pale Egg
- D7FBAD
≈ Lime Mist
トライアド +120° +240°
- FFEE99
Sparkler
- CFF4FF
≈ Water
- FFE3F6
≈ Bunny Tail
スプリットコンプリメンタリー +150° +210°
- FFEE99
Sparkler
- DFEFFF
≈ Calcareous Sinter
- F3E7FF
≈ Soft Lavender
テトラード +90° +180° +270°
- FFEE99
Sparkler
- ABFFF7
≈ Frostbite
- E8EBFF
≈ Brilliant White
- FFE5E9
≈ Nosegay
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.17:1 · APCA Lc 8
Ag
AAA黒の上
WCAG 17.94:1 · APCA Lc 96
最適な文字色: #000000
WCAG 17.94:1 (AAA) · APCA Lc 96
Contrast pairs
コードスニペット
CSS
:root {
--sparkler: #ffee99;
--sparkler-rgb: 255 238 153;
--sparkler-oklch: oklch(0.944 0.107 98.3);
}
.element {
color: var(--sparkler);
background-color: hsl(50 100% 80%);
border-color: oklch(0.944 0.107 98.3);
}Tailwind CSS v4
@theme {
--color-sparkler: #ffee99;
--color-sparkler-50: #fcf7d4;
--color-sparkler-100: #f0e9c1;
--color-sparkler-200: #ded6a1;
--color-sparkler-300: #c4b978;
--color-sparkler-400: #af9f51;
--color-sparkler-500: #998620;
--color-sparkler-600: #81721f;
--color-sparkler-700: #675b18;
--color-sparkler-800: #4d420f;
--color-sparkler-900: #362e09;
--color-sparkler-950: #211a00;
}SCSS
$sparkler: #ffee99;
$sparkler-rgb: 255, 238, 153;
$sparkler-light: mix(#fff, $sparkler, 20%);
$sparkler-dark: mix(#000, $sparkler, 20%);
.element {
color: $sparkler;
box-shadow: 0 0 0 2px rgba($sparkler, 0.35);
}