Adlandırılmış renk · #FFEE22
Big Yellow Streak
Big Yellow Streak, #FFEE22: rgb(255 238 34), hsl(55 100% 57%), oklch(0.934 0.192 104.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Big Yellow Streak color name →
#FFEE22
oklch(0.934 0.192 104.1)
Renk dönüşümleri
- HEX
- #ffee22
- RGB
- rgb(255 238 34)
- HSL
- hsl(55 100% 57%)
- HWB
- hwb(55 13% 0%)
- OKLCH
- oklch(0.934 0.192 104.1)
- OKLab
- oklab(0.934 -0.047 0.186)
- CIE Lab
- lab(93.29 -7.69 86.78)
- LCH
- lch(93.29 87.12 95.1)
- CMYK
- cmyk(0% 7% 87% 0%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- FFF051
- FFF26D
- FEF484
- FEF699
- FEF8AC
- FEFABE
- FEFBCF
- FEFDDF
- FFFEEF
Koyu tonlar
- DECF1C
- BEB116
- 9E9311
- 80770B
- 635C07
- 484203
- 2E2A01
- 161400
- 030300
Gri tonlar
- F1E33F
- E4D850
- D7CD5C
- CAC265
- BDB76C
- B0AC72
- A4A177
- 98967B
- 8C8B7E
Renk uyumları
Tamamlayıcı +180°
- FFEE22
Big Yellow Streak
- E6E7FF
≈ Cyber Lavender
Analog -30° +30°
- FFEE22
Big Yellow Streak
- FFE5C2
≈ Neutral Peach
- BFFF96
≈ Apatite Crystal Green
Üçlü +120° +240°
- FFEE22
Big Yellow Streak
- CBF0FF
≈ Heaven’s Gate
- FFDEF0
≈ So This Is Love
Bölünmüş tamamlayıcı +150° +210°
- FFEE22
Big Yellow Streak
- DBEBFF
≈ Hoarfrost
- F4E1FF
≈ Lavender Savour
Dörtlü +90° +180° +270°
- FFEE22
Big Yellow Streak
- 90FFFD
≈ Glitter Shower
- E6E7FF
≈ Cyber Lavender
- FFE0E2
≈ Sweet Mallow
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.19:1 · APCA Lc 10
Ag
AAASiyah üzerinde
WCAG 17.50:1 · APCA Lc 95
En iyi metin rengi: #000000
WCAG 17.50:1 (AAA) · APCA Lc 95
Contrast pairs
Kod parçacıkları
CSS
:root {
--big-yellow-streak: #ffee22;
--big-yellow-streak-rgb: 255 238 34;
--big-yellow-streak-oklch: oklch(0.934 0.192 104.1);
}
.element {
color: var(--big-yellow-streak);
background-color: hsl(55 100% 57%);
border-color: oklch(0.934 0.192 104.1);
}Tailwind CSS v4
@theme {
--color-big-yellow-streak: #ffee22;
--color-big-yellow-streak-50: #fcf9b9;
--color-big-yellow-streak-100: #f0eda1;
--color-big-yellow-streak-200: #dfda74;
--color-big-yellow-streak-300: #c5bd2e;
--color-big-yellow-streak-400: #b2a100;
--color-big-yellow-streak-500: #9d8800;
--color-big-yellow-streak-600: #857300;
--color-big-yellow-streak-700: #6a5c00;
--color-big-yellow-streak-800: #514200;
--color-big-yellow-streak-900: #382e00;
--color-big-yellow-streak-950: #231a00;
}SCSS
$big-yellow-streak: #ffee22;
$big-yellow-streak-rgb: 255, 238, 34;
$big-yellow-streak-light: mix(#fff, $big-yellow-streak, 20%);
$big-yellow-streak-dark: mix(#000, $big-yellow-streak, 20%);
.element {
color: $big-yellow-streak;
box-shadow: 0 0 0 2px rgba($big-yellow-streak, 0.35);
}