Najbliższy nazwany kolor · #C983C0
#C983C0
Najbliższy nazwany kolor: Pink Punk
#C983C0 (rgb(201 131 192), hsl(308 39% 65%), oklch(0.702 0.117 331.4)) jest najbliższy nazwanemu kolorowi Pink Punk. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#C983C0
oklch(0.702 0.117 331.4)
Konwersje koloru
- HEX
- #c983c0
- RGB
- rgb(201 131 192)
- HSL
- hsl(308 39% 65%)
- HWB
- hwb(308 51% 21%)
- OKLCH
- oklch(0.702 0.117 331.4)
- OKLab
- oklab(0.702 0.103 -0.056)
- CIE Lab
- lab(63.72 34.63 -20.52)
- LCH
- lch(63.72 40.25 329.4)
- CMYK
- cmyk(0% 35% 4% 21%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CF8FC6
- D59CCD
- DAA8D3
- E0B4D9
- E6C1E0
- EBCDE6
- F0D9EC
- F5E6F3
- FAF2F9
Odcienie ciemniejsze
- AE71A7
- 95608E
- 7C4F76
- 643F5F
- 4C2F49
- 362034
- 221220
- 0F060E
- 020102
Tony
- C283BA
- BB83B3
- B383AD
- AC83A6
- A583A0
- 9E8299
- 968293
- 8F818D
- 888186
Harmonie kolorów
Komplementarna +180°
- C983C0
Pink Punk
- 63B479
≈ Appleton
Analogowa -30° +30°
- C983C0
Pink Punk
- AC8DDC
≈ Middy’s Purple
- DA7F9A
≈ Impatient Pink
Triada +120° +240°
- C983C0
Pink Punk
- BA9C3E
≈ Gold Taffeta
- 1DB2C8
≈ Antigua Blue
Komplementarna rozszczepiona +150° +210°
- C983C0
Pink Punk
- 94AA52
≈ Springtide Melodies
- 2AB6A4
≈ Capture
Tetrada +90° +180° +270°
- C983C0
Pink Punk
- D38D4D
≈ Cognac
- 63B479
≈ Appleton
- 54A7E1
≈ High Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.80:1 · APCA Lc 54
Ag
AAANa czerni
WCAG 7.49:1 · APCA Lc 48
Najlepszy kolor tekstu: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmenty kodu
CSS
:root {
--pink-punk: #c983c0;
--pink-punk-rgb: 201 131 192;
--pink-punk-oklch: oklch(0.702 0.117 331.4);
}
.element {
color: var(--pink-punk);
background-color: hsl(308 39% 65%);
border-color: oklch(0.702 0.117 331.4);
}Tailwind CSS v4
@theme {
--color-pink-punk: #c983c0;
--color-pink-punk-50: #ffe9ff;
--color-pink-punk-100: #ffdaf9;
--color-pink-punk-200: #f4c2ea;
--color-pink-punk-300: #dca1d1;
--color-pink-punk-400: #c784be;
--color-pink-punk-500: #b267a9;
--color-pink-punk-600: #96588f;
--color-pink-punk-700: #794673;
--color-pink-punk-800: #583256;
--color-pink-punk-900: #3e223c;
--color-pink-punk-950: #271126;
}SCSS
$pink-punk: #c983c0;
$pink-punk-rgb: 201, 131, 192;
$pink-punk-light: mix(#fff, $pink-punk, 20%);
$pink-punk-dark: mix(#000, $pink-punk, 20%);
.element {
color: $pink-punk;
box-shadow: 0 0 0 2px rgba($pink-punk, 0.35);
}