Nazwany kolor · #BC555E
Hibiscus Flower
Hibiscus Flower to #BC555E: rgb(188 85 94), hsl(355 43% 54%), oklch(0.581 0.133 16.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Hibiscus Flower color name →
#BC555E
oklch(0.581 0.133 16.8)
Konwersje koloru
- HEX
- #bc555e
- RGB
- rgb(188 85 94)
- HSL
- hsl(355 43% 54%)
- HWB
- hwb(355 33% 26%)
- OKLCH
- oklch(0.581 0.133 16.8)
- OKLab
- oklab(0.581 0.127 0.038)
- CIE Lab
- lab(49.95 42.94 16.16)
- LCH
- lch(49.95 45.88 20.6)
- CMYK
- cmyk(0% 55% 50% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C4676D
- CC787C
- D4888C
- DB999C
- E2AAAC
- E9BBBC
- EFCCCC
- F5DDDD
- FAEEEE
Odcienie ciemniejsze
- A34951
- 8B3D44
- 733137
- 5D262B
- 471C1F
- 321114
- 1F080A
- 0D0203
- 020000
Tony
- B75B62
- B26065
- AC6468
- A7696C
- A16D6F
- 9B7173
- 957576
- 8E7979
- 877D7D
Harmonie kolorów
Komplementarna +180°
- BC555E
Hibiscus Flower
- 008C8E
≈ Egyptian Teal
Analogowa -30° +30°
- BC555E
Hibiscus Flower
- B1568A
≈ Pink Pizzazz
- B85E2C
≈ Gold Varnish Brown
Triada +120° +240°
- BC555E
Hibiscus Flower
- 528C37
≈ Fiji Palm
- 437BC8
≈ Celestial Plum
Komplementarna rozszczepiona +150° +210°
- BC555E
Hibiscus Flower
- 00906B
≈ Sea Swell
- 0087AE
≈ Lyrebird
Tetrada +90° +180° +270°
- BC555E
Hibiscus Flower
- 847F00
≈ Olive
- 008C8E
≈ Egyptian Teal
- 766CC5
≈ Purple Toolbox
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.56:1 · APCA Lc 71
Ag
AANa czerni
WCAG 4.59:1 · APCA Lc 30
Najlepszy kolor tekstu: #000000
WCAG 4.59:1 (AA) · APCA Lc 30
Contrast pairs
Fragmenty kodu
CSS
:root {
--hibiscus-flower: #bc555e;
--hibiscus-flower-rgb: 188 85 94;
--hibiscus-flower-oklch: oklch(0.581 0.133 16.8);
}
.element {
color: var(--hibiscus-flower);
background-color: hsl(355 43% 54%);
border-color: oklch(0.581 0.133 16.8);
}Tailwind CSS v4
@theme {
--color-hibiscus-flower: #bc555e;
--color-hibiscus-flower-50: #ffe7e6;
--color-hibiscus-flower-100: #ffd7d7;
--color-hibiscus-flower-200: #ffbebe;
--color-hibiscus-flower-300: #f49b9d;
--color-hibiscus-flower-400: #e27c82;
--color-hibiscus-flower-500: #cf5c66;
--color-hibiscus-flower-600: #af4e57;
--color-hibiscus-flower-700: #8d3e45;
--color-hibiscus-flower-800: #682c33;
--color-hibiscus-flower-900: #4a1e23;
--color-hibiscus-flower-950: #300d12;
}SCSS
$hibiscus-flower: #bc555e;
$hibiscus-flower-rgb: 188, 85, 94;
$hibiscus-flower-light: mix(#fff, $hibiscus-flower, 20%);
$hibiscus-flower-dark: mix(#000, $hibiscus-flower, 20%);
.element {
color: $hibiscus-flower;
box-shadow: 0 0 0 2px rgba($hibiscus-flower, 0.35);
}