Adlandırılmış renk · #58111A
Chocolate Cosmos
Chocolate Cosmos, #58111A: rgb(88 17 26), hsl(352 68% 21%), oklch(0.307 0.102 19). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Brown mean? → · Chocolate Cosmos color name →
#58111A
oklch(0.307 0.102 19)
Renk dönüşümleri
- HEX
- #58111a
- RGB
- rgb(88 17 26)
- HSL
- hsl(352 68% 21%)
- HWB
- hwb(352 7% 65%)
- OKLCH
- oklch(0.307 0.102 19)
- OKLab
- oklab(0.307 0.096 0.033)
- CIE Lab
- lab(18.52 32.79 14.71)
- LCH
- lch(18.52 35.94 24.2)
- CMYK
- cmyk(0% 81% 70% 65%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 6A2A2E
- 7B4042
- 8C5657
- 9D6D6D
- AD8484
- BE9C9B
- CEB4B3
- DFCCCC
- EFE5E5
Koyu tonlar
- 4B0D15
- 3F0910
- 33060C
- 280407
- 1D0204
- 120102
- 090001
- 030000
- 000000
Gri tonlar
- 5D1F24
- 632A2D
- 673537
- 6C4041
- 704B4B
- 745555
- 776060
- 7B6B6A
- 7D7575
Renk uyumları
Tamamlayıcı +180°
- 58111A
Chocolate Cosmos
- 003739
≈ Customs Green
Analog -30° +30°
- 58111A
Chocolate Cosmos
- 521338
≈ Tulip Poplar Purple
- 4F2000
≈ Evil Cigar
Üçlü +120° +240°
- 58111A
Chocolate Cosmos
- 103A00
≈ Elite Green
- 092D62
≈ Marine
Bölünmüş tamamlayıcı +150° +210°
- 58111A
Chocolate Cosmos
- 00392A
≈ Off-Road Green
- 003548
≈ Crowberry Blue
Dörtlü +90° +180° +270°
- 58111A
Chocolate Cosmos
- 323200
≈ Wasabi Nori
- 003739
≈ Customs Green
- 30235F
≈ Indie Go
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 13.90:1 · APCA Lc 100
Ag
FailSiyah üzerinde
WCAG 1.51:1 · APCA Lc 0
En iyi metin rengi: #FFFFFF
WCAG 13.90:1 (AAA) · APCA Lc 100
Contrast pairs
Kod parçacıkları
CSS
:root {
--chocolate-cosmos: #58111a;
--chocolate-cosmos-rgb: 88 17 26;
--chocolate-cosmos-oklch: oklch(0.307 0.102 19);
}
.element {
color: var(--chocolate-cosmos);
background-color: hsl(352 68% 21%);
border-color: oklch(0.307 0.102 19);
}Tailwind CSS v4
@theme {
--color-chocolate-cosmos: #58111a;
--color-chocolate-cosmos-50: #ffeae9;
--color-chocolate-cosmos-100: #ffdbd9;
--color-chocolate-cosmos-200: #fdc4c2;
--color-chocolate-cosmos-300: #e7a3a1;
--color-chocolate-cosmos-400: #d48587;
--color-chocolate-cosmos-500: #c0686b;
--color-chocolate-cosmos-600: #a2595b;
--color-chocolate-cosmos-700: #824748;
--color-chocolate-cosmos-800: #613336;
--color-chocolate-cosmos-900: #442325;
--color-chocolate-cosmos-950: #2c1113;
}SCSS
$chocolate-cosmos: #58111a;
$chocolate-cosmos-rgb: 88, 17, 26;
$chocolate-cosmos-light: mix(#fff, $chocolate-cosmos, 20%);
$chocolate-cosmos-dark: mix(#000, $chocolate-cosmos, 20%);
.element {
color: $chocolate-cosmos;
box-shadow: 0 0 0 2px rgba($chocolate-cosmos, 0.35);
}