Najbliższy nazwany kolor · #BC4516
#BC4516
Najbliższy nazwany kolor: Copper Hopper
#BC4516 (rgb(188 69 22), hsl(17 79% 41%), oklch(0.549 0.163 39.1)) jest najbliższy nazwanemu kolorowi Copper Hopper. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#BC4516
oklch(0.549 0.163 39.1)
Konwersje koloru
- HEX
- #bc4516
- RGB
- rgb(188 69 22)
- HSL
- hsl(17 79% 41%)
- HWB
- hwb(17 9% 26%)
- OKLCH
- oklch(0.549 0.163 39.1)
- OKLab
- oklab(0.549 0.126 0.103)
- CIE Lab
- lab(46.32 47.37 51.04)
- LCH
- lch(46.32 69.63 47.1)
- CMYK
- cmyk(0% 63% 88% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C55A35
- CD6D4D
- D58063
- DD9279
- E4A48F
- EAB6A5
- F0C8BB
- F6DAD2
- FBEDE8
Odcienie ciemniejsze
- A33B12
- 8B310D
- 732709
- 5D1E06
- 471503
- 320C02
- 1F0501
- 0D0200
- 020000
Tony
- B74D28
- B25535
- AD5C40
- A8624A
- A26854
- 9C6D5D
- 967266
- 8F776F
- 887C78
Harmonie kolorów
Komplementarna +180°
- BC4516
Copper Hopper
- 007E98
≈ Pacific Pleasure
Analogowa -30° +30°
- BC4516
Copper Hopper
- BB3D5D
≈ Mauve It
- 9D6200
≈ Raw Sienna
Triada +120° +240°
- BC4516
Copper Hopper
- 008756
≈ Pixel Nature
- 6061CD
≈ Dark Periwinkle
Komplementarna rozszczepiona +150° +210°
- BC4516
Copper Hopper
- 00837D
≈ Blue Winged Teal
- 0074C5
≈ Science Blue
Tetrada +90° +180° +270°
- BC4516
Copper Hopper
- 568000
≈ Avocado
- 007E98
≈ Pacific Pleasure
- 8D50B8
≈ Tyrian Shimmer
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.24:1 · APCA Lc 75
Ag
FailNa czerni
WCAG 4.00:1 · APCA Lc 27
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.24:1 (AA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
CSS
:root {
--copper-hopper: #bc4516;
--copper-hopper-rgb: 188 69 22;
--copper-hopper-oklch: oklch(0.549 0.163 39.1);
}
.element {
color: var(--copper-hopper);
background-color: hsl(17 79% 41%);
border-color: oklch(0.549 0.163 39.1);
}Tailwind CSS v4
@theme {
--color-copper-hopper: #bc4516;
--color-copper-hopper-50: #ffe7d2;
--color-copper-hopper-100: #ffd7be;
--color-copper-hopper-200: #ffbd9e;
--color-copper-hopper-300: #fd9a74;
--color-copper-hopper-400: #ed7850;
--color-copper-hopper-500: #db5522;
--color-copper-hopper-600: #b9491f;
--color-copper-hopper-700: #953a19;
--color-copper-hopper-800: #6f2913;
--color-copper-hopper-900: #4f1b0c;
--color-copper-hopper-950: #340b01;
}SCSS
$copper-hopper: #bc4516;
$copper-hopper-rgb: 188, 69, 22;
$copper-hopper-light: mix(#fff, $copper-hopper, 20%);
$copper-hopper-dark: mix(#000, $copper-hopper, 20%);
.element {
color: $copper-hopper;
box-shadow: 0 0 0 2px rgba($copper-hopper, 0.35);
}