Adlandırılmış renk · #CEAA64
Ginger Crunch
Ginger Crunch, #CEAA64: rgb(206 170 100), hsl(40 52% 60%), oklch(0.755 0.098 82.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Ginger Crunch color name →
#CEAA64
oklch(0.755 0.098 82.9)
Renk dönüşümleri
- HEX
- #ceaa64
- RGB
- rgb(206 170 100)
- HSL
- hsl(40 52% 60%)
- HWB
- hwb(40 39% 19%)
- OKLCH
- oklch(0.755 0.098 82.9)
- OKLab
- oklab(0.755 0.012 0.097)
- CIE Lab
- lab(71.77 7.24 40.97)
- LCH
- lch(71.77 41.61 80)
- CMYK
- cmyk(0% 17% 51% 19%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D3B274
- D8BB84
- DDC394
- E2CCA3
- E7D4B3
- ECDDC2
- F0E5D1
- F5EEE0
- FAF6F0
Koyu tonlar
- B39356
- 987D48
- 7F683B
- 66532E
- 4E3F22
- 382D16
- 231B0B
- 0F0B03
- 020100
Gri tonlar
- C6A668
- BEA26C
- B69E6F
- AE9972
- A69575
- 9F9178
- 978D7A
- 8F897C
- 88847E
Renk uyumları
Tamamlayıcı +180°
- CEAA64
Ginger Crunch
- 8FB0EE
≈ Fly Away
Analog -30° +30°
- CEAA64
Ginger Crunch
- E19E74
≈ Pecan Veneer
- B0B66C
≈ Lime Rickey
Üçlü +120° +240°
- CEAA64
Ginger Crunch
- 57C2CB
≈ Baharroth Blue
- CE9BD4
≈ Ineffable Magenta
Bölünmüş tamamlayıcı +150° +210°
- CEAA64
Ginger Crunch
- 6BBAE4
≈ Norfolk Sky
- B2A4E9
≈ Maximum Blue Purple
Dörtlü +90° +180° +270°
- CEAA64
Ginger Crunch
- 66C4A9
≈ Kauai
- 8FB0EE
≈ Fly Away
- E196B5
≈ Peach Flower
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.19:1 · APCA Lc 43
Ag
AAASiyah üzerinde
WCAG 9.55:1 · APCA Lc 59
En iyi metin rengi: #000000
WCAG 9.55:1 (AAA) · APCA Lc 59
Contrast pairs
Kod parçacıkları
CSS
:root {
--ginger-crunch: #ceaa64;
--ginger-crunch-rgb: 206 170 100;
--ginger-crunch-oklch: oklch(0.755 0.098 82.9);
}
.element {
color: var(--ginger-crunch);
background-color: hsl(40 52% 60%);
border-color: oklch(0.755 0.098 82.9);
}Tailwind CSS v4
@theme {
--color-ginger-crunch: #ceaa64;
--color-ginger-crunch-50: #fff4d6;
--color-ginger-crunch-100: #f7e6c3;
--color-ginger-crunch-200: #e8d2a5;
--color-ginger-crunch-300: #cfb47d;
--color-ginger-crunch-400: #bb9958;
--color-ginger-crunch-500: #a67f2e;
--color-ginger-crunch-600: #8c6c29;
--color-ginger-crunch-700: #705620;
--color-ginger-crunch-800: #543e15;
--color-ginger-crunch-900: #3a2b0e;
--color-ginger-crunch-950: #241802;
}SCSS
$ginger-crunch: #ceaa64;
$ginger-crunch-rgb: 206, 170, 100;
$ginger-crunch-light: mix(#fff, $ginger-crunch, 20%);
$ginger-crunch-dark: mix(#000, $ginger-crunch, 20%);
.element {
color: $ginger-crunch;
box-shadow: 0 0 0 2px rgba($ginger-crunch, 0.35);
}