Nazwany kolor · #D56C2B
Christmas Orange
Christmas Orange to #D56C2B: rgb(213 108 43), hsl(23 67% 50%), oklch(0.644 0.152 48.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Christmas Orange color name →
#D56C2B
oklch(0.644 0.152 48.5)
Konwersje koloru
- HEX
- #d56c2b
- RGB
- rgb(213 108 43)
- HSL
- hsl(23 67% 50%)
- HWB
- hwb(23 17% 16%)
- OKLCH
- oklch(0.644 0.152 48.5)
- OKLab
- oklab(0.644 0.101 0.114)
- CIE Lab
- lab(57.75 39.23 53.59)
- LCH
- lch(57.75 66.41 53.8)
- CMYK
- cmyk(0% 49% 80% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DB7C46
- E08B5C
- E59971
- EAA886
- EEB79A
- F3C5AE
- F6D4C2
- FAE2D6
- FCF1EB
Odcienie ciemniejsze
- B95D24
- 9E4E1D
- 834016
- 6A3210
- 51250A
- 3A1905
- 240D02
- 100401
- 020000
Tony
- CD6F39
- C57244
- BD754D
- B57756
- AD795E
- A47B65
- 9C7C6C
- 937E73
- 8A7F7A
Harmonie kolorów
Komplementarna +180°
- D56C2B
Christmas Orange
- 009BCA
≈ Isle of Capri
Analogowa -30° +30°
- D56C2B
Christmas Orange
- DA6169
≈ Swiss Chard
- B98200
≈ Letter Jacket
Triada +120° +240°
- D56C2B
Christmas Orange
- 00A67F
≈ Active Green
- 8B7BE3
≈ Indigo Bloom
Komplementarna rozszczepiona +150° +210°
- D56C2B
Christmas Orange
- 00A1A6
≈ Ducati
- 508CE8
≈ Olympic Blue
Tetrada +90° +180° +270°
- D56C2B
Christmas Orange
- 59A241
≈ Green Acres
- 009BCA
≈ Isle of Capri
- B46CC8
≈ Lavendless
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.49:1 · APCA Lc 62
Ag
AANa czerni
WCAG 6.00:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 6.00:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
CSS
:root {
--christmas-orange: #d56c2b;
--christmas-orange-rgb: 213 108 43;
--christmas-orange-oklch: oklch(0.644 0.152 48.5);
}
.element {
color: var(--christmas-orange);
background-color: hsl(23 67% 50%);
border-color: oklch(0.644 0.152 48.5);
}Tailwind CSS v4
@theme {
--color-christmas-orange: #d56c2b;
--color-christmas-orange-50: #ffeacf;
--color-christmas-orange-100: #ffdabb;
--color-christmas-orange-200: #ffc299;
--color-christmas-orange-300: #f5a06e;
--color-christmas-orange-400: #e58046;
--color-christmas-orange-500: #d35f01;
--color-christmas-orange-600: #b2510a;
--color-christmas-orange-700: #8f410a;
--color-christmas-orange-800: #6b2e08;
--color-christmas-orange-900: #4b1f06;
--color-christmas-orange-950: #310e00;
}SCSS
$christmas-orange: #d56c2b;
$christmas-orange-rgb: 213, 108, 43;
$christmas-orange-light: mix(#fff, $christmas-orange, 20%);
$christmas-orange-dark: mix(#000, $christmas-orange, 20%);
.element {
color: $christmas-orange;
box-shadow: 0 0 0 2px rgba($christmas-orange, 0.35);
}