Nazwany kolor · #A3A7CC
Blossom Mauve
Blossom Mauve to #A3A7CC: rgb(163 167 204), hsl(234 29% 72%), oklch(0.738 0.054 280.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Blossom Mauve color name →
#A3A7CC
oklch(0.738 0.054 280.2)
Konwersje koloru
- HEX
- #a3a7cc
- RGB
- rgb(163 167 204)
- HSL
- hsl(234 29% 72%)
- HWB
- hwb(234 64% 20%)
- OKLCH
- oklch(0.738 0.054 280.2)
- OKLab
- oklab(0.738 0.009 -0.053)
- CIE Lab
- lab(69.12 4.42 -19.48)
- LCH
- lch(69.12 19.97 282.8)
- CMYK
- cmyk(20% 18% 0% 20%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ACB0D1
- B5B8D6
- BEC1DB
- C7CAE1
- D0D2E6
- D9DBEB
- E3E4F0
- ECEDF5
- F5F6FA
Odcienie ciemniejsze
- 8D91B1
- 787B97
- 63667E
- 4F5265
- 3C3E4E
- 2A2C37
- 191A22
- 0A0A0F
- 010102
Tony
- 9FA3C4
- 9C9FBC
- 989BB5
- 9597AD
- 9193A6
- 8E909E
- 8A8C96
- 87888F
- 838487
Harmonie kolorów
Komplementarna +180°
- A3A7CC
Blossom Mauve
- B2AB85
≈ Underhive Ash
Analogowa -30° +30°
- A3A7CC
Blossom Mauve
- 91ADCB
≈ Chambray Blue
- B5A1C4
≈ Berry Frappé
Triada +120° +240°
- A3A7CC
Blossom Mauve
- C99F91
≈ Adobe Glow
- 8DB59F
≈ Summer Green
Komplementarna rozszczepiona +150° +210°
- A3A7CC
Blossom Mauve
- C0A586
≈ Farro
- 9FB18E
≈ Soap Green
Tetrada +90° +180° +270°
- A3A7CC
Blossom Mauve
- C99DA2
≈ Beauty Secret
- B2AB85
≈ Underhive Ash
- 83B5B2
≈ Cold Front Green
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.34:1 · APCA Lc 46
Ag
AAANa czerni
WCAG 8.95:1 · APCA Lc 56
Najlepszy kolor tekstu: #000000
WCAG 8.95:1 (AAA) · APCA Lc 56
Contrast pairs
Fragmenty kodu
CSS
:root {
--blossom-mauve: #a3a7cc;
--blossom-mauve-rgb: 163 167 204;
--blossom-mauve-oklch: oklch(0.738 0.054 280.2);
}
.element {
color: var(--blossom-mauve);
background-color: hsl(234 29% 72%);
border-color: oklch(0.738 0.054 280.2);
}Tailwind CSS v4
@theme {
--color-blossom-mauve: #a3a7cc;
--color-blossom-mauve-50: #f2f4ff;
--color-blossom-mauve-100: #e5e6fa;
--color-blossom-mauve-200: #d0d2eb;
--color-blossom-mauve-300: #b2b5d3;
--color-blossom-mauve-400: #989bbe;
--color-blossom-mauve-500: #7f83aa;
--color-blossom-mauve-600: #6b6f8f;
--color-blossom-mauve-700: #565873;
--color-blossom-mauve-800: #3e4155;
--color-blossom-mauve-900: #2a2d3b;
--color-blossom-mauve-950: #181a25;
}SCSS
$blossom-mauve: #a3a7cc;
$blossom-mauve-rgb: 163, 167, 204;
$blossom-mauve-light: mix(#fff, $blossom-mauve, 20%);
$blossom-mauve-dark: mix(#000, $blossom-mauve, 20%);
.element {
color: $blossom-mauve;
box-shadow: 0 0 0 2px rgba($blossom-mauve, 0.35);
}