Nazwany kolor · #CDA5DF
Tropical Violet
Tropical Violet to #CDA5DF: rgb(205 165 223), hsl(281 48% 76%), oklch(0.777 0.092 315.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Tropical Violet color name →
#CDA5DF
oklch(0.777 0.092 315.2)
Konwersje koloru
- HEX
- #cda5df
- RGB
- rgb(205 165 223)
- HSL
- hsl(281 48% 76%)
- HWB
- hwb(281 65% 13%)
- OKLCH
- oklch(0.777 0.092 315.2)
- OKLab
- oklab(0.777 0.065 -0.065)
- CIE Lab
- lab(72.91 22.88 -23.71)
- LCH
- lch(72.91 32.95 314)
- CMYK
- cmyk(8% 26% 0% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D2AEE2
- D7B7E6
- DCC0E9
- E1C9EC
- E6D2F0
- EBDBF3
- F0E4F6
- F5EDF9
- FAF6FC
Odcienie ciemniejsze
- B28FC2
- 9879A5
- 7E658A
- 66516F
- 4E3D56
- 382B3D
- 231A27
- 0F0A12
- 020102
Tony
- C5A1D5
- BD9ECC
- B59AC2
- AE96B8
- A693AF
- 9E8FA5
- 978B9C
- 8F8893
- 878489
Harmonie kolorów
Komplementarna +180°
- CDA5DF
Tropical Violet
- 9DC489
≈ Picnic
Analogowa -30° +30°
- CDA5DF
Tropical Violet
- B0AFEF
≈ Maximum Blue Purple
- E19FC4
≈ Lilac Chiffon
Triada +120° +240°
- CDA5DF
Tropical Violet
- D9AE73
≈ Mustard Field
- 68C9C9
≈ Petrichor
Komplementarna rozszczepiona +150° +210°
- CDA5DF
Tropical Violet
- BFBA74
≈ Liminal Yellow
- 7BC9A8
≈ Aqua Eden
Tetrada +90° +180° +270°
- CDA5DF
Tropical Violet
- E8A485
≈ Ceramic Glaze
- 9DC489
≈ Picnic
- 72C3E3
≈ Bright Spark
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.09:1 · APCA Lc 41
Ag
AAANa czerni
WCAG 10.04:1 · APCA Lc 61
Najlepszy kolor tekstu: #000000
WCAG 10.04:1 (AAA) · APCA Lc 61
Contrast pairs
Fragmenty kodu
CSS
:root {
--tropical-violet: #cda5df;
--tropical-violet-rgb: 205 165 223;
--tropical-violet-oklch: oklch(0.777 0.092 315.2);
}
.element {
color: var(--tropical-violet);
background-color: hsl(281 48% 76%);
border-color: oklch(0.777 0.092 315.2);
}Tailwind CSS v4
@theme {
--color-tropical-violet: #cda5df;
--color-tropical-violet-50: #ffeeff;
--color-tropical-violet-100: #f5dffd;
--color-tropical-violet-200: #e5c9ef;
--color-tropical-violet-300: #cba9d7;
--color-tropical-violet-400: #b38ec4;
--color-tropical-violet-500: #9d73b0;
--color-tropical-violet-600: #856294;
--color-tropical-violet-700: #6a4e77;
--color-tropical-violet-800: #4e3959;
--color-tropical-violet-900: #36273e;
--color-tropical-violet-950: #211527;
}SCSS
$tropical-violet: #cda5df;
$tropical-violet-rgb: 205, 165, 223;
$tropical-violet-light: mix(#fff, $tropical-violet, 20%);
$tropical-violet-dark: mix(#000, $tropical-violet, 20%);
.element {
color: $tropical-violet;
box-shadow: 0 0 0 2px rgba($tropical-violet, 0.35);
}