Adlandırılmış renk · #ECCBA0
Cream Snap
Cream Snap, #ECCBA0: rgb(236 203 160), hsl(34 67% 78%), oklch(0.86 0.068 74). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Cream Snap color name →
#ECCBA0
oklch(0.86 0.068 74)
Renk dönüşümleri
- HEX
- #eccba0
- RGB
- rgb(236 203 160)
- HSL
- hsl(34 67% 78%)
- HWB
- hwb(34 63% 7%)
- OKLCH
- oklch(0.86 0.068 74)
- OKLab
- oklab(0.86 0.019 0.065)
- CIE Lab
- lab(83.76 7.52 26.05)
- LCH
- lch(83.76 27.11 73.9)
- CMYK
- cmyk(0% 14% 32% 7%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- EED0AA
- F0D5B3
- F2DBBD
- F4E0C6
- F6E5D0
- F8EAD9
- FAEFE3
- FBF5EC
- FDFAF6
Koyu tonlar
- CDB08B
- AF9676
- 927D61
- 76654E
- 5B4D3B
- 423729
- 292219
- 130F09
- 030201
Gri tonlar
- E1C39D
- D6BC9A
- CBB497
- C0AC94
- B5A591
- AA9D8D
- 9F968A
- 958F87
- 8A8783
Renk uyumları
Tamamlayıcı +180°
- ECCBA0
Cream Snap
- B3D4FD
≈ Ice Cold Stare
Analog -30° +30°
- ECCBA0
Cream Snap
- F8C3AD
≈ Coral Bisque
- D8D4A0
≈ Garden Glade
Üçlü +120° +240°
- ECCBA0
Cream Snap
- 9CDFDE
≈ Pale Pastel
- E1C4F1
≈ Prom Corsage
Bölünmüş tamamlayıcı +150° +210°
- ECCBA0
Cream Snap
- A1DBF2
≈ Sora Blue
- CBCCFD
≈ Lavender Blue
Dörtlü +90° +180° +270°
- ECCBA0
Cream Snap
- A8E0C5
≈ Mountain Mint
- B3D4FD
≈ Ice Cold Stare
- F2C0DC
≈ Rosy Nectar
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.54:1 · APCA Lc 25
Ag
AAASiyah üzerinde
WCAG 13.61:1 · APCA Lc 78
En iyi metin rengi: #000000
WCAG 13.61:1 (AAA) · APCA Lc 78
Contrast pairs
Kod parçacıkları
CSS
:root {
--cream-snap: #eccba0;
--cream-snap-rgb: 236 203 160;
--cream-snap-oklch: oklch(0.86 0.068 74);
}
.element {
color: var(--cream-snap);
background-color: hsl(34 67% 78%);
border-color: oklch(0.86 0.068 74);
}Tailwind CSS v4
@theme {
--color-cream-snap: #eccba0;
--color-cream-snap-50: #fff3e0;
--color-cream-snap-100: #f5e5cf;
--color-cream-snap-200: #e5d1b5;
--color-cream-snap-300: #ccb391;
--color-cream-snap-400: #b79972;
--color-cream-snap-500: #a18052;
--color-cream-snap-600: #886c46;
--color-cream-snap-700: #6d5638;
--color-cream-snap-800: #513f28;
--color-cream-snap-900: #382b1a;
--color-cream-snap-950: #23180b;
}SCSS
$cream-snap: #eccba0;
$cream-snap-rgb: 236, 203, 160;
$cream-snap-light: mix(#fff, $cream-snap, 20%);
$cream-snap-dark: mix(#000, $cream-snap, 20%);
.element {
color: $cream-snap;
box-shadow: 0 0 0 2px rgba($cream-snap, 0.35);
}