Color con nombre · #B87333
Copper
Copper es #B87333: rgb(184 115 51), hsl(29 57% 46%), oklch(0.618 0.117 60.4). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Copper color name →
#B87333
oklch(0.618 0.117 60.4)
Conversiones de color
- HEX
- #b87333
- RGB
- rgb(184 115 51)
- HSL
- hsl(29 57% 46%)
- HWB
- hwb(29 20% 28%)
- OKLCH
- oklch(0.618 0.117 60.4)
- OKLab
- oklab(0.618 0.058 0.102)
- CIE Lab
- lab(55.23 23.97 45.88)
- LCH
- lch(55.23 51.77 62.4)
- CMYK
- cmyk(0% 38% 72% 28%)
Tintes · Sombras · Tonos
Tintes
- C0814A
- C78F5F
- CF9D73
- D6AB87
- DDB89B
- E4C6AF
- EBD4C3
- F2E3D7
- F9F1EB
Sombras
- A0632B
- 885423
- 71451C
- 5B3614
- 45280D
- 311B07
- 1E0F03
- 0C0501
- 020100
Tonos
- B3753E
- AE7747
- A87850
- A37A58
- 9D7B5F
- 987C66
- 927D6D
- 8C7E73
- 867F7A
Armonías de color
Complementario +180°
- B87333
Copper
- 368EC5
≈ Porpita Porpita
Análogo -30° +30°
- B87333
Copper
- C2685A
≈ Tapestry Red
- A0821D
≈ Hacienda
Triádico +120° +240°
Complementario dividido +150° +210°
- B87333
Copper
- 0096A9
≈ Brilliant
- 6B81CC
≈ Livid
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.79:1 · APCA Lc 65
Ag
AASobre negro
WCAG 5.53:1 · APCA Lc 36
Mejor color de texto: #000000
WCAG 5.53:1 (AA) · APCA Lc 36
Contrast pairs
Fragmentos de código
CSS
:root {
--copper: #b87333;
--copper-rgb: 184 115 51;
--copper-oklch: oklch(0.618 0.117 60.4);
}
.element {
color: var(--copper);
background-color: hsl(29 57% 46%);
border-color: oklch(0.618 0.117 60.4);
}Tailwind CSS v4
@theme {
--color-copper: #b87333;
--color-copper-50: #ffefd4;
--color-copper-100: #ffe0c0;
--color-copper-200: #f9caa1;
--color-copper-300: #e3aa78;
--color-copper-400: #d18d53;
--color-copper-500: #bd7126;
--color-copper-600: #a06022;
--color-copper-700: #804d1b;
--color-copper-800: #603713;
--color-copper-900: #43260c;
--color-copper-950: #2b1401;
}SCSS
$copper: #b87333;
$copper-rgb: 184, 115, 51;
$copper-light: mix(#fff, $copper, 20%);
$copper-dark: mix(#000, $copper, 20%);
.element {
color: $copper;
box-shadow: 0 0 0 2px rgba($copper, 0.35);
}