Adlandırılmış renk · #B06880
Crushed Raspberry
Crushed Raspberry, #B06880: rgb(176 104 128), hsl(340 31% 55%), oklch(0.604 0.096 359). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Crushed Raspberry color name →
#B06880
oklch(0.604 0.096 359)
Renk dönüşümleri
- HEX
- #b06880
- RGB
- rgb(176 104 128)
- HSL
- hsl(340 31% 55%)
- HWB
- hwb(340 41% 31%)
- OKLCH
- oklch(0.604 0.096 359)
- OKLab
- oklab(0.604 0.096 -0.002)
- CIE Lab
- lab(52.83 31.84 -0.29)
- LCH
- lch(52.83 31.84 359.5)
- CMYK
- cmyk(0% 41% 27% 31%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- B9778C
- C18598
- CA94A4
- D2A3B1
- DAB2BE
- E1C1CA
- E9D0D7
- F1E0E4
- F8EFF2
Koyu tonlar
- 99596E
- 824B5D
- 6C3E4D
- 56303D
- 42242E
- 2E181F
- 1C0C12
- 0B0406
- 010001
Gri tonlar
- AC6B80
- A76E80
- A37080
- 9E7380
- 9A7580
- 957780
- 907A80
- 8B7C80
- 867E80
Renk uyumları
Tamamlayıcı +180°
- B06880
Crushed Raspberry
- 2D9482
≈ Approval Green
Analog -30° +30°
- B06880
Crushed Raspberry
- A16C9E
≈ Violet Femmes
- B46A60
≈ Peach Dunes
Üçlü +120° +240°
- B06880
Crushed Raspberry
- 7B8943
≈ Sea Turtle
- 4489B5
≈ Walker Lake
Bölünmüş tamamlayıcı +150° +210°
- B06880
Crushed Raspberry
- 569161
≈ DaVanzo Green
- 2191A0
≈ Jaded
Dörtlü +90° +180° +270°
- B06880
Crushed Raspberry
- 997E36
≈ Metallic Sunburst
- 2D9482
≈ Approval Green
- 6A7FBB
≈ Persian Jewel
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.08:1 · APCA Lc 68
Ag
AASiyah üzerinde
WCAG 5.13:1 · APCA Lc 34
En iyi metin rengi: #000000
WCAG 5.13:1 (AA) · APCA Lc 34
Contrast pairs
Kod parçacıkları
CSS
:root {
--crushed-raspberry: #b06880;
--crushed-raspberry-rgb: 176 104 128;
--crushed-raspberry-oklch: oklch(0.604 0.096 359);
}
.element {
color: var(--crushed-raspberry);
background-color: hsl(340 31% 55%);
border-color: oklch(0.604 0.096 359);
}Tailwind CSS v4
@theme {
--color-crushed-raspberry: #b06880;
--color-crushed-raspberry-50: #ffeaf3;
--color-crushed-raspberry-100: #ffdbe6;
--color-crushed-raspberry-200: #f9c4d2;
--color-crushed-raspberry-300: #e2a3b4;
--color-crushed-raspberry-400: #cd869d;
--color-crushed-raspberry-500: #b96a85;
--color-crushed-raspberry-600: #9d5a70;
--color-crushed-raspberry-700: #7e485a;
--color-crushed-raspberry-800: #5d3443;
--color-crushed-raspberry-900: #41232e;
--color-crushed-raspberry-950: #29121b;
}SCSS
$crushed-raspberry: #b06880;
$crushed-raspberry-rgb: 176, 104, 128;
$crushed-raspberry-light: mix(#fff, $crushed-raspberry, 20%);
$crushed-raspberry-dark: mix(#000, $crushed-raspberry, 20%);
.element {
color: $crushed-raspberry;
box-shadow: 0 0 0 2px rgba($crushed-raspberry, 0.35);
}