Nazwany kolor · #BB9252
Lion’s Slumber
Lion’s Slumber to #BB9252: rgb(187 146 82), hsl(37 44% 53%), oklch(0.685 0.096 77.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Lion’s Slumber color name →
#BB9252
oklch(0.685 0.096 77.2)
Konwersje koloru
- HEX
- #bb9252
- RGB
- rgb(187 146 82)
- HSL
- hsl(37 44% 53%)
- HWB
- hwb(37 32% 27%)
- OKLCH
- oklch(0.685 0.096 77.2)
- OKLab
- oklab(0.685 0.021 0.093)
- CIE Lab
- lab(63.49 10.44 39.72)
- LCH
- lch(63.49 41.07 75.3)
- CMYK
- cmyk(0% 22% 56% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C29D64
- C9A776
- D0B287
- D6BD98
- DDC8A9
- E4D3BA
- EBDECB
- F2E9DC
- F8F4EE
Odcienie ciemniejsze
- A27E46
- 8A6B3B
- 73582F
- 5C4625
- 46351A
- 322511
- 1F1608
- 0D0802
- 020100
Tony
- B59058
- AF8F5E
- A98D63
- A38B68
- 9E8A6C
- 988871
- 928675
- 8C8479
- 86827C
Harmonie kolorów
Komplementarna +180°
- BB9252
Lion’s Slumber
- 739CD5
≈ Ice Blue
Analogowa -30° +30°
- BB9252
Lion’s Slumber
- CB8765
≈ Escalope
- A09E55
≈ Garden of Earthly Delights
Triada +120° +240°
- BB9252
Lion’s Slumber
- 42ACAE
≈ Pluto
- B287C1
≈ Creeping Bellflower
Komplementarna rozszczepiona +150° +210°
- BB9252
Lion’s Slumber
- 51A6C8
≈ Pottery Blue
- 9691D2
≈ Adora
Tetrada +90° +180° +270°
- BB9252
Lion’s Slumber
- 58AD8E
≈ O’grady Green
- 739CD5
≈ Ice Blue
- C681A5
≈ Moonlight Mauve
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.85:1 · APCA Lc 55
Ag
AAANa czerni
WCAG 7.34:1 · APCA Lc 47
Najlepszy kolor tekstu: #000000
WCAG 7.34:1 (AAA) · APCA Lc 47
Contrast pairs
Fragmenty kodu
CSS
:root {
--lion-s-slumber: #bb9252;
--lion-s-slumber-rgb: 187 146 82;
--lion-s-slumber-oklch: oklch(0.685 0.096 77.2);
}
.element {
color: var(--lion-s-slumber);
background-color: hsl(37 44% 53%);
border-color: oklch(0.685 0.096 77.2);
}Tailwind CSS v4
@theme {
--color-lion-s-slumber: #bb9252;
--color-lion-s-slumber-50: #fff3d7;
--color-lion-s-slumber-100: #f9e5c5;
--color-lion-s-slumber-200: #ebd0a7;
--color-lion-s-slumber-300: #d2b27f;
--color-lion-s-slumber-400: #be975b;
--color-lion-s-slumber-500: #a97d33;
--color-lion-s-slumber-600: #8f6a2d;
--color-lion-s-slumber-700: #735524;
--color-lion-s-slumber-800: #563d18;
--color-lion-s-slumber-900: #3c2a10;
--color-lion-s-slumber-950: #251803;
}SCSS
$lion-s-slumber: #bb9252;
$lion-s-slumber-rgb: 187, 146, 82;
$lion-s-slumber-light: mix(#fff, $lion-s-slumber, 20%);
$lion-s-slumber-dark: mix(#000, $lion-s-slumber, 20%);
.element {
color: $lion-s-slumber;
box-shadow: 0 0 0 2px rgba($lion-s-slumber, 0.35);
}