Adlandırılmış renk · #F5C20B
Sunshine Mellow
Sunshine Mellow, #F5C20B: rgb(245 194 11), hsl(47 92% 50%), oklch(0.836 0.169 89.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Sunshine Mellow color name →
#F5C20B
oklch(0.836 0.169 89.3)
Renk dönüşümleri
- HEX
- #f5c20b
- RGB
- rgb(245 194 11)
- HSL
- hsl(47 92% 50%)
- HWB
- hwb(47 4% 4%)
- OKLCH
- oklch(0.836 0.169 89.3)
- OKLab
- oklab(0.836 0.002 0.169)
- CIE Lab
- lab(81.3 8.99 80.94)
- LCH
- lch(81.3 81.44 83.7)
- CMYK
- cmyk(0% 21% 96% 4%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F6C943
- F7CF61
- F8D579
- F9DC8E
- FAE2A3
- FBE8B6
- FCEEC9
- FDF4DB
- FEF9ED
Koyu tonlar
- D5A808
- B68F06
- 987704
- 7B6002
- 5F4901
- 443401
- 2B2000
- 150E00
- 030200
Gri tonlar
- E9BC32
- DDB544
- D1AF52
- C5A85C
- B9A264
- AD9B6C
- A29472
- 968E77
- 8B877C
Renk uyumları
Tamamlayıcı +180°
- F5C20B
Sunshine Mellow
- B4C8FF
≈ Night Snow
Analog -30° +30°
- F5C20B
Sunshine Mellow
- FFB87E
≈ Go Go Mango
- BDD846
≈ June Bud
Üçlü +120° +240°
- F5C20B
Sunshine Mellow
- 00E2FC
≈ Vaporwave Blue
- FFA4F9
≈ Jigglypuff
Bölünmüş tamamlayıcı +150° +210°
- F5C20B
Sunshine Mellow
- 90D2FF
≈ Long Island Sound
- D2BCFF
≈ Lavender Tonic
Dörtlü +90° +180° +270°
- F5C20B
Sunshine Mellow
- 00E9CC
≈ Fake Jade
- B4C8FF
≈ Night Snow
- FFAEC7
≈ Heartfelt
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.66:1 · APCA Lc 29
Ag
AAASiyah üzerinde
WCAG 12.60:1 · APCA Lc 74
En iyi metin rengi: #000000
WCAG 12.60:1 (AAA) · APCA Lc 74
Contrast pairs
Kod parçacıkları
CSS
:root {
--sunshine-mellow: #f5c20b;
--sunshine-mellow-rgb: 245 194 11;
--sunshine-mellow-oklch: oklch(0.836 0.169 89.3);
}
.element {
color: var(--sunshine-mellow);
background-color: hsl(47 92% 50%);
border-color: oklch(0.836 0.169 89.3);
}Tailwind CSS v4
@theme {
--color-sunshine-mellow: #f5c20b;
--color-sunshine-mellow-50: #fff4be;
--color-sunshine-mellow-100: #fde7a7;
--color-sunshine-mellow-200: #efd27d;
--color-sunshine-mellow-300: #d7b441;
--color-sunshine-mellow-400: #c69700;
--color-sunshine-mellow-500: #b27c00;
--color-sunshine-mellow-600: #976900;
--color-sunshine-mellow-700: #795400;
--color-sunshine-mellow-800: #5b3c00;
--color-sunshine-mellow-900: #402900;
--color-sunshine-mellow-950: #291700;
}SCSS
$sunshine-mellow: #f5c20b;
$sunshine-mellow-rgb: 245, 194, 11;
$sunshine-mellow-light: mix(#fff, $sunshine-mellow, 20%);
$sunshine-mellow-dark: mix(#000, $sunshine-mellow, 20%);
.element {
color: $sunshine-mellow;
box-shadow: 0 0 0 2px rgba($sunshine-mellow, 0.35);
}