Nazwany kolor · #A063A1
Royal Pretender
Royal Pretender to #A063A1: rgb(160 99 161), hsl(299 25% 51%), oklch(0.589 0.115 326.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Royal Pretender color name →
#A063A1
oklch(0.589 0.115 326.4)
Konwersje koloru
- HEX
- #a063a1
- RGB
- rgb(160 99 161)
- HSL
- hsl(299 25% 51%)
- HWB
- hwb(299 39% 37%)
- OKLCH
- oklch(0.589 0.115 326.4)
- OKLab
- oklab(0.589 0.096 -0.064)
- CIE Lab
- lab(50.6 32.74 -23.25)
- LCH
- lch(50.6 40.15 324.6)
- CMYK
- cmyk(1% 39% 0% 37%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- AA72AA
- B381B4
- BD91BD
- C7A0C7
- D0B0D0
- DABFD9
- E3CFE3
- ECDFEC
- F6EFF6
Odcienie ciemniejsze
- 8B558B
- 764776
- 613A62
- 4E2E4E
- 3B213C
- 29162A
- 190B19
- 090309
- 010001
Tony
- 9D669E
- 9A6A9B
- 976D97
- 947094
- 917391
- 8E768E
- 8B788A
- 877B87
- 847E83
Harmonie kolorów
Komplementarna +180°
- A063A1
Royal Pretender
- 4A8F52
≈ Ineffable Forest
Analogowa -30° +30°
- A063A1
Royal Pretender
- 846DB9
≈ Lavish Spending
- B25E7F
≈ Indian Pink
Triada +120° +240°
- A063A1
Royal Pretender
- 9B7713
≈ Mesozoic Green
- 008D9A
≈ Coral Coast
Komplementarna rozszczepiona +150° +210°
- A063A1
Royal Pretender
- 798529
≈ Trendy Green
- 00927B
≈ Aqua Waters
Tetrada +90° +180° +270°
- A063A1
Royal Pretender
- B06930
≈ Tanooki Suit Brown
- 4A8F52
≈ Ineffable Forest
- 2386B8
≈ Mermaid Dreams
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.38:1 · APCA Lc 70
Ag
AANa czerni
WCAG 4.79:1 · APCA Lc 32
Najlepszy kolor tekstu: #000000
WCAG 4.79:1 (AA) · APCA Lc 32
Contrast pairs
Fragmenty kodu
CSS
:root {
--royal-pretender: #a063a1;
--royal-pretender-rgb: 160 99 161;
--royal-pretender-oklch: oklch(0.589 0.115 326.4);
}
.element {
color: var(--royal-pretender);
background-color: hsl(299 25% 51%);
border-color: oklch(0.589 0.115 326.4);
}Tailwind CSS v4
@theme {
--color-royal-pretender: #a063a1;
--color-royal-pretender-50: #ffeaff;
--color-royal-pretender-100: #fedbfc;
--color-royal-pretender-200: #f0c3ed;
--color-royal-pretender-300: #d8a3d5;
--color-royal-pretender-400: #c286c3;
--color-royal-pretender-500: #ad69ae;
--color-royal-pretender-600: #925993;
--color-royal-pretender-700: #754776;
--color-royal-pretender-800: #563459;
--color-royal-pretender-900: #3c233e;
--color-royal-pretender-950: #261227;
}SCSS
$royal-pretender: #a063a1;
$royal-pretender-rgb: 160, 99, 161;
$royal-pretender-light: mix(#fff, $royal-pretender, 20%);
$royal-pretender-dark: mix(#000, $royal-pretender, 20%);
.element {
color: $royal-pretender;
box-shadow: 0 0 0 2px rgba($royal-pretender, 0.35);
}