Nazwany kolor · #68578C
Butterfly Bush
Butterfly Bush to #68578C: rgb(104 87 140), hsl(259 23% 45%), oklch(0.496 0.085 298). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Butterfly Bush color name →
#68578C
oklch(0.496 0.085 298)
Konwersje koloru
- HEX
- #68578c
- RGB
- rgb(104 87 140)
- HSL
- hsl(259 23% 45%)
- HWB
- hwb(259 34% 45%)
- OKLCH
- oklch(0.496 0.085 298)
- OKLab
- oklab(0.496 0.04 -0.075)
- CIE Lab
- lab(40.41 16.2 -27.11)
- LCH
- lch(40.41 31.59 300.9)
- CMYK
- cmyk(26% 38% 0% 45%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 766797
- 8477A3
- 9287AE
- A197BA
- B0A8C5
- BFB9D1
- CFCADC
- DFDCE8
- EFEDF3
Odcienie ciemniejsze
- 594B79
- 4B3E67
- 3E3355
- 302743
- 241C33
- 181223
- 0C0814
- 040307
- 000001
Tony
- 6A5B8B
- 6D608A
- 6F6489
- 716888
- 746C87
- 767086
- 787484
- 7B7883
- 7D7C82
Harmonie kolorów
Komplementarna +180°
- 68578C
Butterfly Bush
- 5E682C
≈ Deathworld Forest
Analogowa -30° +30°
- 68578C
Butterfly Bush
- 4D6093
≈ Last Light Blue
- 7C507A
≈ Phlox Flower Violet
Triada +120° +240°
- 68578C
Butterfly Bush
- 86552E
≈ Burnt Crust
- 167262
≈ Northern Hemisphere
Komplementarna rozszczepiona +150° +210°
- 68578C
Butterfly Bush
- 765F21
≈ Brassy Brass
- 3E6F46
≈ Parsley Sprig
Tetrada +90° +180° +270°
- 68578C
Butterfly Bush
- 8C4E47
≈ Lotus
- 5E682C
≈ Deathworld Forest
- 026F7B
≈ Carnival Night
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.30:1 · APCA Lc 81
Ag
FailNa czerni
WCAG 3.33:1 · APCA Lc 21
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.30:1 (AA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--butterfly-bush: #68578c;
--butterfly-bush-rgb: 104 87 140;
--butterfly-bush-oklch: oklch(0.496 0.085 298);
}
.element {
color: var(--butterfly-bush);
background-color: hsl(259 23% 45%);
border-color: oklch(0.496 0.085 298);
}Tailwind CSS v4
@theme {
--color-butterfly-bush: #68578c;
--color-butterfly-bush-50: #f8f0ff;
--color-butterfly-bush-100: #ece2ff;
--color-butterfly-bush-200: #d9cdf4;
--color-butterfly-bush-300: #beaedd;
--color-butterfly-bush-400: #a494ca;
--color-butterfly-bush-500: #8d7ab7;
--color-butterfly-bush-600: #77679b;
--color-butterfly-bush-700: #5f527c;
--color-butterfly-bush-800: #453c5c;
--color-butterfly-bush-900: #302941;
--color-butterfly-bush-950: #1c1729;
}SCSS
$butterfly-bush: #68578c;
$butterfly-bush-rgb: 104, 87, 140;
$butterfly-bush-light: mix(#fff, $butterfly-bush, 20%);
$butterfly-bush-dark: mix(#000, $butterfly-bush, 20%);
.element {
color: $butterfly-bush;
box-shadow: 0 0 0 2px rgba($butterfly-bush, 0.35);
}