Nazwany kolor · #8E3537
Sizzling Bacon
Sizzling Bacon to #8E3537: rgb(142 53 55), hsl(359 46% 38%), oklch(0.456 0.121 21.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Sizzling Bacon color name →
#8E3537
oklch(0.456 0.121 21.9)
Konwersje koloru
- HEX
- #8e3537
- RGB
- rgb(142 53 55)
- HSL
- hsl(359 46% 38%)
- HWB
- hwb(359 21% 44%)
- OKLCH
- oklch(0.456 0.121 21.9)
- OKLab
- oklab(0.456 0.112 0.045)
- CIE Lab
- lab(35.6 38.57 19.55)
- LCH
- lch(35.6 43.24 26.9)
- CMYK
- cmyk(0% 63% 61% 44%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 9B4A49
- A75D5C
- B3716F
- BF8582
- CB9896
- D6ACAA
- E0C1BF
- EBD5D4
- F5EAE9
Odcienie ciemniejsze
- 7B2D2E
- 682526
- 561D1E
- 441516
- 340E0F
- 240808
- 150303
- 070101
- 010000
Tony
- 8E3E3E
- 8E4646
- 8D4E4D
- 8C5654
- 8B5D5B
- 8A6463
- 886B6A
- 867271
- 837979
Harmonie kolorów
Komplementarna +180°
- 8E3537
Sizzling Bacon
- 006369
≈ Really Teal
Analogowa -30° +30°
- 8E3537
Sizzling Bacon
- 87355E
≈ Boysenberry
- 884000
≈ Gryphonne Sepia Wash
Triada +120° +240°
- 8E3537
Sizzling Bacon
- 276722
≈ Avagddu Green
- 2F5499
≈ Blue Sail
Komplementarna rozszczepiona +150° +210°
- 8E3537
Sizzling Bacon
- 006651
≈ Piney Lake
- 005F81
≈ Adriatic Sea
Tetrada +90° +180° +270°
- 8E3537
Sizzling Bacon
- 595C00
≈ Greensboro
- 006369
≈ Really Teal
- 594794
≈ Liberty
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.73:1 · APCA Lc 86
Ag
FailNa czerni
WCAG 2.71:1 · APCA Lc 16
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.73:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--sizzling-bacon: #8e3537;
--sizzling-bacon-rgb: 142 53 55;
--sizzling-bacon-oklch: oklch(0.456 0.121 21.9);
}
.element {
color: var(--sizzling-bacon);
background-color: hsl(359 46% 38%);
border-color: oklch(0.456 0.121 21.9);
}Tailwind CSS v4
@theme {
--color-sizzling-bacon: #8e3537;
--color-sizzling-bacon-50: #ffe8e4;
--color-sizzling-bacon-100: #ffd9d4;
--color-sizzling-bacon-200: #ffc1bb;
--color-sizzling-bacon-300: #ef9f99;
--color-sizzling-bacon-400: #dd807e;
--color-sizzling-bacon-500: #ca6261;
--color-sizzling-bacon-600: #ab5353;
--color-sizzling-bacon-700: #894242;
--color-sizzling-bacon-800: #662f31;
--color-sizzling-bacon-900: #482021;
--color-sizzling-bacon-950: #2e0f10;
}SCSS
$sizzling-bacon: #8e3537;
$sizzling-bacon-rgb: 142, 53, 55;
$sizzling-bacon-light: mix(#fff, $sizzling-bacon, 20%);
$sizzling-bacon-dark: mix(#000, $sizzling-bacon, 20%);
.element {
color: $sizzling-bacon;
box-shadow: 0 0 0 2px rgba($sizzling-bacon, 0.35);
}