Nazwany kolor · #687698
Lavender Mauve
Lavender Mauve to #687698: rgb(104 118 152), hsl(222 19% 50%), oklch(0.567 0.055 267.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Lavender Mauve color name →
#687698
oklch(0.567 0.055 267.2)
Konwersje koloru
- HEX
- #687698
- RGB
- rgb(104 118 152)
- HSL
- hsl(222 19% 50%)
- HWB
- hwb(222 41% 40%)
- OKLCH
- oklch(0.567 0.055 267.2)
- OKLab
- oklab(0.567 -0.003 -0.055)
- CIE Lab
- lab(49.46 0.96 -20.34)
- LCH
- lch(49.46 20.36 272.7)
- CMYK
- cmyk(32% 22% 0% 40%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 7683A2
- 8490AC
- 939DB6
- A2ABC1
- B1B8CB
- C0C6D5
- CFD4E0
- DFE2EA
- EFF1F5
Odcienie ciemniejsze
- 596684
- 4B5670
- 3E475C
- 30384A
- 242938
- 181C27
- 0C0F17
- 040508
- 000101
Tony
- 6A7796
- 6D7893
- 6F7991
- 727A8F
- 747B8C
- 767C8A
- 797D88
- 7B7E85
- 7E7F83
Harmonie kolorów
Komplementarna +180°
- 687698
Lavender Mauve
- 857550
≈ Woodbridge
Analogowa -30° +30°
- 687698
Lavender Mauve
- 577C94
≈ Mallorca Blue
- 7A7094
≈ Parisian Violet
Triada +120° +240°
- 687698
Lavender Mauve
- 956A65
≈ Clay Ridge
- 618064
≈ Mistletoe Whisper
Komplementarna rozszczepiona +150° +210°
- 687698
Lavender Mauve
- 906F56
≈ Mushroom Brown
- 747B56
≈ Loden Green
Tetrada +90° +180° +270°
- 687698
Lavender Mauve
- 926977
≈ Copper Pink
- 857550
≈ Woodbridge
- 528276
≈ Frosty Spruce
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.53:1 · APCA Lc 71
Ag
AANa czerni
WCAG 4.63:1 · APCA Lc 30
Najlepszy kolor tekstu: #000000
WCAG 4.63:1 (AA) · APCA Lc 30
Contrast pairs
Fragmenty kodu
CSS
:root {
--lavender-mauve: #687698;
--lavender-mauve-rgb: 104 118 152;
--lavender-mauve-oklch: oklch(0.567 0.055 267.2);
}
.element {
color: var(--lavender-mauve);
background-color: hsl(222 19% 50%);
border-color: oklch(0.567 0.055 267.2);
}Tailwind CSS v4
@theme {
--color-lavender-mauve: #687698;
--color-lavender-mauve-50: #eff5ff;
--color-lavender-mauve-100: #e0e8fb;
--color-lavender-mauve-200: #cad4ed;
--color-lavender-mauve-300: #acb7d5;
--color-lavender-mauve-400: #909ec0;
--color-lavender-mauve-500: #7685ac;
--color-lavender-mauve-600: #647191;
--color-lavender-mauve-700: #505a74;
--color-lavender-mauve-800: #394256;
--color-lavender-mauve-900: #272e3c;
--color-lavender-mauve-950: #151a26;
}SCSS
$lavender-mauve: #687698;
$lavender-mauve-rgb: 104, 118, 152;
$lavender-mauve-light: mix(#fff, $lavender-mauve, 20%);
$lavender-mauve-dark: mix(#000, $lavender-mauve, 20%);
.element {
color: $lavender-mauve;
box-shadow: 0 0 0 2px rgba($lavender-mauve, 0.35);
}