Nazwany kolor · #7F4330
Coppery Orange
Coppery Orange to #7F4330: rgb(127 67 48), hsl(14 45% 34%), oklch(0.453 0.088 38.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Coppery Orange color name →
#7F4330
oklch(0.453 0.088 38.3)
Konwersje koloru
- HEX
- #7f4330
- RGB
- rgb(127 67 48)
- HSL
- hsl(14 45% 34%)
- HWB
- hwb(14 19% 50%)
- OKLCH
- oklch(0.453 0.088 38.3)
- OKLab
- oklab(0.453 0.069 0.055)
- CIE Lab
- lab(35.84 25.06 23.48)
- LCH
- lch(35.84 34.35 43.1)
- CMYK
- cmyk(0% 47% 62% 50%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 8C5543
- 996757
- A6796A
- B38B7E
- C09E93
- CDB1A8
- D9C4BD
- E6D7D3
- F3EBE9
Odcienie ciemniejsze
- 6E3928
- 5D2F21
- 4C261A
- 3C1D13
- 2D140C
- 1F0C06
- 110503
- 060101
- 010000
Tony
- 804A38
- 815040
- 815648
- 825C50
- 826258
- 826860
- 826E68
- 817470
- 817A78
Harmonie kolorów
Komplementarna +180°
- 7F4330
Coppery Orange
- 006074
≈ Ocean Radiance
Analogowa -30° +30°
- 7F4330
Coppery Orange
- 7F3F4C
≈ Ruby Lips
- 764C15
≈ Hairy Brown
Triada +120° +240°
- 7F4330
Coppery Orange
- 206543
≈ Fairway Green
- 4B5086
≈ Twilight
Komplementarna rozszczepiona +150° +210°
- 7F4330
Coppery Orange
- 00645E
≈ Emerald Stone
- 295985
≈ Dead Lake
Tetrada +90° +180° +270°
- 7F4330
Coppery Orange
- 475F26
≈ Obscure Olive
- 006074
≈ Ocean Radiance
- 64487B
≈ Picasso Lily
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.64:1 · APCA Lc 86
Ag
FailNa czerni
WCAG 2.74:1 · APCA Lc 16
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.64:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--coppery-orange: #7f4330;
--coppery-orange-rgb: 127 67 48;
--coppery-orange-oklch: oklch(0.453 0.088 38.3);
}
.element {
color: var(--coppery-orange);
background-color: hsl(14 45% 34%);
border-color: oklch(0.453 0.088 38.3);
}Tailwind CSS v4
@theme {
--color-coppery-orange: #7f4330;
--color-coppery-orange-50: #ffede2;
--color-coppery-orange-100: #ffdfd2;
--color-coppery-orange-200: #f7c8b8;
--color-coppery-orange-300: #e0a995;
--color-coppery-orange-400: #cc8c78;
--color-coppery-orange-500: #b8715a;
--color-coppery-orange-600: #9c604d;
--color-coppery-orange-700: #7d4c3d;
--color-coppery-orange-800: #5d372d;
--color-coppery-orange-900: #41261e;
--color-coppery-orange-950: #29140e;
}SCSS
$coppery-orange: #7f4330;
$coppery-orange-rgb: 127, 67, 48;
$coppery-orange-light: mix(#fff, $coppery-orange, 20%);
$coppery-orange-dark: mix(#000, $coppery-orange, 20%);
.element {
color: $coppery-orange;
box-shadow: 0 0 0 2px rgba($coppery-orange, 0.35);
}