Nazwany kolor · #8A83DA
Indigo Bloom
Indigo Bloom to #8A83DA: rgb(138 131 218), hsl(245 54% 68%), oklch(0.653 0.128 286). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Indigo Bloom color name →
#8A83DA
oklch(0.653 0.128 286)
Konwersje koloru
- HEX
- #8a83da
- RGB
- rgb(138 131 218)
- HSL
- hsl(245 54% 68%)
- HWB
- hwb(245 51% 15%)
- OKLCH
- oklch(0.653 0.128 286)
- OKLab
- oklab(0.653 0.035 -0.123)
- CIE Lab
- lab(58.2 18.41 -44.22)
- LCH
- lch(58.2 47.9 292.6)
- CMYK
- cmyk(37% 40% 0% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 958FDE
- A09CE3
- ABA8E7
- B6B4EB
- C2C1EF
- CECDF2
- DADAF6
- E6E6F9
- F2F2FC
Odcienie ciemniejsze
- 7771BD
- 6560A2
- 534F87
- 423F6C
- 322F54
- 22203C
- 141225
- 070611
- 010102
Tony
- 8983D1
- 8883C8
- 8683BF
- 8583B6
- 8483AD
- 8382A5
- 82829B
- 828192
- 818189
Harmonie kolorów
Komplementarna +180°
- 8A83DA
Indigo Bloom
- 9B9423
≈ Art Nouveau Green
Analogowa -30° +30°
- 8A83DA
Indigo Bloom
- 5992DD
≈ United Nations Blue
- AE76C4
≈ Wisteria
Triada +120° +240°
- 8A83DA
Indigo Bloom
- CF7548
≈ Garnet Sand
- 21A87E
≈ Simply Green
Komplementarna rozszczepiona +150° +210°
- 8A83DA
Indigo Bloom
- BC841F
≈ Gothic Gold
- 6BA14F
≈ Off Green
Tetrada +90° +180° +270°
- 8A83DA
Indigo Bloom
- D26D75
≈ Mexican Chile
- 9B9423
≈ Art Nouveau Green
- 00A5A6
≈ Wax Crayon Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.31:1 · APCA Lc 60
Ag
AANa czerni
WCAG 6.33:1 · APCA Lc 41
Najlepszy kolor tekstu: #000000
WCAG 6.33:1 (AA) · APCA Lc 41
Contrast pairs
Fragmenty kodu
CSS
:root {
--indigo-bloom: #8a83da;
--indigo-bloom-rgb: 138 131 218;
--indigo-bloom-oklch: oklch(0.653 0.128 286);
}
.element {
color: var(--indigo-bloom);
background-color: hsl(245 54% 68%);
border-color: oklch(0.653 0.128 286);
}Tailwind CSS v4
@theme {
--color-indigo-bloom: #8a83da;
--color-indigo-bloom-50: #f3f0ff;
--color-indigo-bloom-100: #e5e2ff;
--color-indigo-bloom-200: #d1ccff;
--color-indigo-bloom-300: #b4adf5;
--color-indigo-bloom-400: #9892e6;
--color-indigo-bloom-500: #8077d6;
--color-indigo-bloom-600: #6c65b5;
--color-indigo-bloom-700: #575191;
--color-indigo-bloom-800: #3e3b6d;
--color-indigo-bloom-900: #2a294c;
--color-indigo-bloom-950: #181633;
}SCSS
$indigo-bloom: #8a83da;
$indigo-bloom-rgb: 138, 131, 218;
$indigo-bloom-light: mix(#fff, $indigo-bloom, 20%);
$indigo-bloom-dark: mix(#000, $indigo-bloom, 20%);
.element {
color: $indigo-bloom;
box-shadow: 0 0 0 2px rgba($indigo-bloom, 0.35);
}