Nazwany kolor · #6B3FA0
Poppy Pompadour
Poppy Pompadour to #6B3FA0: rgb(107 63 160), hsl(267 43% 44%), oklch(0.469 0.152 301.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Poppy Pompadour color name →
#6B3FA0
oklch(0.469 0.152 301.7)
Konwersje koloru
- HEX
- #6b3fa0
- RGB
- rgb(107 63 160)
- HSL
- hsl(267 43% 44%)
- HWB
- hwb(267 25% 37%)
- OKLCH
- oklch(0.469 0.152 301.7)
- OKLab
- oklab(0.469 0.08 -0.13)
- CIE Lab
- lab(35.92 34.91 -46.22)
- LCH
- lch(35.92 57.92 307.1)
- CMYK
- cmyk(33% 61% 0% 37%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 7853AA
- 8666B4
- 9478BE
- A38BC8
- B19ED2
- C0B1DB
- D0C4E4
- DFD8ED
- EFEBF6
Odcienie ciemniejsze
- 5C358B
- 4E2C76
- 3F2361
- 321B4E
- 25123B
- 180A29
- 0D0419
- 040109
- 000001
Tony
- 6D479D
- 6F4E9B
- 715598
- 735C95
- 756292
- 77698F
- 796F8B
- 7B7588
- 7E7A84
Harmonie kolorów
Komplementarna +180°
- 6B3FA0
Poppy Pompadour
- 506300
≈ Serrano Pepper
Analogowa -30° +30°
- 6B3FA0
Poppy Pompadour
- 3E4FAE
≈ Night in Manchester
- 883180
≈ Purple Sultan
Triada +120° +240°
- 6B3FA0
Poppy Pompadour
- 844A00
≈ Dried Mustard
- 00695E
≈ Evergreen Forest
Komplementarna rozszczepiona +150° +210°
- 6B3FA0
Poppy Pompadour
- 6E5800
≈ Hot Mustard
- 006D34
≈ Column of Oak Green
Tetrada +90° +180° +270°
- 6B3FA0
Poppy Pompadour
- 9E2D1B
≈ Red Birch
- 506300
≈ Serrano Pepper
- 006675
≈ Green Spool
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.38:1 · APCA Lc 85
Ag
FailNa czerni
WCAG 2.84:1 · APCA Lc 17
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.38:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--poppy-pompadour: #6b3fa0;
--poppy-pompadour-rgb: 107 63 160;
--poppy-pompadour-oklch: oklch(0.469 0.152 301.7);
}
.element {
color: var(--poppy-pompadour);
background-color: hsl(267 43% 44%);
border-color: oklch(0.469 0.152 301.7);
}Tailwind CSS v4
@theme {
--color-poppy-pompadour: #6b3fa0;
--color-poppy-pompadour-50: #feebff;
--color-poppy-pompadour-100: #f2dcff;
--color-poppy-pompadour-200: #e2c5ff;
--color-poppy-pompadour-300: #c8a4f7;
--color-poppy-pompadour-400: #af87e9;
--color-poppy-pompadour-500: #9969d9;
--color-poppy-pompadour-600: #8259b7;
--color-poppy-pompadour-700: #684793;
--color-poppy-pompadour-800: #4b346f;
--color-poppy-pompadour-900: #34234e;
--color-poppy-pompadour-950: #1f1234;
}SCSS
$poppy-pompadour: #6b3fa0;
$poppy-pompadour-rgb: 107, 63, 160;
$poppy-pompadour-light: mix(#fff, $poppy-pompadour, 20%);
$poppy-pompadour-dark: mix(#000, $poppy-pompadour, 20%);
.element {
color: $poppy-pompadour;
box-shadow: 0 0 0 2px rgba($poppy-pompadour, 0.35);
}