Adlandırılmış renk · #A24A3B
Toasted Cranberry
Toasted Cranberry, #A24A3B: rgb(162 74 59), hsl(9 47% 43%), oklch(0.519 0.12 31.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Toasted Cranberry color name →
#A24A3B
oklch(0.519 0.12 31.4)
Renk dönüşümleri
- HEX
- #a24a3b
- RGB
- rgb(162 74 59)
- HSL
- hsl(9 47% 43%)
- HWB
- hwb(9 23% 36%)
- OKLCH
- oklch(0.519 0.12 31.4)
- OKLab
- oklab(0.519 0.103 0.063)
- CIE Lab
- lab(43.08 36.38 27.21)
- LCH
- lch(43.08 45.43 36.8)
- CMYK
- cmyk(0% 54% 64% 36%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- AD5C4E
- B76E60
- C18073
- CB9286
- D4A39A
- DDB5AD
- E6C8C1
- EFDAD6
- F7ECEA
Koyu tonlar
- 8C3F32
- 773529
- 632A21
- 4F2019
- 3C1711
- 2A0E09
- 190604
- 0A0201
- 010000
Gri tonlar
- A05042
- 9D574A
- 9A5C51
- 976258
- 94675E
- 916C65
- 8D726C
- 897673
- 857B79
Renk uyumları
Tamamlayıcı +180°
- A24A3B
Toasted Cranberry
- 007686
≈ Glamour Green
Analog -30° +30°
- A24A3B
Toasted Cranberry
- 9E4764
≈ Baby Berries
- 985500
≈ Charlie Brown
Üçlü +120° +240°
- A24A3B
Toasted Cranberry
- 247B43
≈ Woodland Soul
- 5062AD
≈ Submarine Base
Bölünmüş tamamlayıcı +150° +210°
- A24A3B
Toasted Cranberry
- 007A6C
≈ Pond Moss
- 056FA7
≈ Bowen Blue
Dörtlü +90° +180° +270°
- A24A3B
Toasted Cranberry
- 5E720D
≈ Fern Frond
- 007686
≈ Glamour Green
- 7556A2
≈ Sumire Violet
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.86:1 · APCA Lc 79
Ag
FailSiyah üzerinde
WCAG 3.57:1 · APCA Lc 23
En iyi metin rengi: #FFFFFF
WCAG 5.86:1 (AA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
CSS
:root {
--toasted-cranberry: #a24a3b;
--toasted-cranberry-rgb: 162 74 59;
--toasted-cranberry-oklch: oklch(0.519 0.12 31.4);
}
.element {
color: var(--toasted-cranberry);
background-color: hsl(9 47% 43%);
border-color: oklch(0.519 0.12 31.4);
}Tailwind CSS v4
@theme {
--color-toasted-cranberry: #a24a3b;
--color-toasted-cranberry-50: #ffeadf;
--color-toasted-cranberry-100: #ffdace;
--color-toasted-cranberry-200: #ffc2b3;
--color-toasted-cranberry-300: #eea18f;
--color-toasted-cranberry-400: #dc8272;
--color-toasted-cranberry-500: #c96452;
--color-toasted-cranberry-600: #aa5546;
--color-toasted-cranberry-700: #884438;
--color-toasted-cranberry-800: #663029;
--color-toasted-cranberry-900: #47211c;
--color-toasted-cranberry-950: #2e100c;
}SCSS
$toasted-cranberry: #a24a3b;
$toasted-cranberry-rgb: 162, 74, 59;
$toasted-cranberry-light: mix(#fff, $toasted-cranberry, 20%);
$toasted-cranberry-dark: mix(#000, $toasted-cranberry, 20%);
.element {
color: $toasted-cranberry;
box-shadow: 0 0 0 2px rgba($toasted-cranberry, 0.35);
}