Najbliższy nazwany kolor · #FD54DD
#FD54DD
Najbliższy nazwany kolor: Purple Pizzazz
#FD54DD (rgb(253 84 221), hsl(311 98% 66%), oklch(0.72 0.248 336.3)) jest najbliższy nazwanemu kolorowi Purple Pizzazz. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#FD54DD
oklch(0.72 0.248 336.3)
Konwersje koloru
- HEX
- #fd54dd
- RGB
- rgb(253 84 221)
- HSL
- hsl(311 98% 66%)
- HWB
- hwb(311 33% 1%)
- OKLCH
- oklch(0.72 0.248 336.3)
- OKLab
- oklab(0.72 0.227 -0.099)
- CIE Lab
- lab(63.83 74.52 -35.86)
- LCH
- lch(63.83 82.7 334.3)
- CMYK
- cmyk(0% 67% 13% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF6AE1
- FF7EE5
- FF90E8
- FFA1EC
- FFB1EF
- FFC1F3
- FFD1F6
- FFE1F9
- FFF0FC
Odcienie ciemniejsze
- DC48C0
- BC3CA4
- 9D3188
- 7F266E
- 621B55
- 47113D
- 2D0826
- 160211
- 030002
Tony
- F15DD4
- E564CA
- D96AC1
- CD6FB8
- C173AE
- B577A5
- A87A9C
- 9B7C93
- 8E7E89
Harmonie kolorów
Komplementarna +180°
- FD54DD
Purple Pizzazz
- 00C375
≈ Algal Fuel
Analogowa -30° +30°
- FD54DD
Purple Pizzazz
- C280FF
≈ Grass Pink Orchid
- FF6A92
≈ Blush Hour
Triada +120° +240°
- FD54DD
Purple Pizzazz
- C0A300
≈ Snakebite Leather
- 00B7D8
≈ Maldives
Komplementarna rozszczepiona +150° +210°
- FD54DD
Purple Pizzazz
- 87B800
≈ Dark Lime
- 00BDB1
≈ Turquoise Topaz
Tetrada +90° +180° +270°
- FD54DD
Purple Pizzazz
- E68D00
≈ Hotter Butter
- 00C375
≈ Algal Fuel
- 42ABFF
≈ Adamantine Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.80:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.48:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.48:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-pizzazz: #fd54dd;
--purple-pizzazz-rgb: 253 84 221;
--purple-pizzazz-oklch: oklch(0.72 0.248 336.3);
}
.element {
color: var(--purple-pizzazz);
background-color: hsl(311 98% 66%);
border-color: oklch(0.72 0.248 336.3);
}Tailwind CSS v4
@theme {
--color-purple-pizzazz: #fd54dd;
--color-purple-pizzazz-50: #ffdaff;
--color-purple-pizzazz-100: #ffc8ff;
--color-purple-pizzazz-200: #ffa9f8;
--color-purple-pizzazz-300: #ff7ee2;
--color-purple-pizzazz-400: #f254d4;
--color-purple-pizzazz-500: #e005c1;
--color-purple-pizzazz-600: #bd11a3;
--color-purple-pizzazz-700: #981083;
--color-purple-pizzazz-800: #700a64;
--color-purple-pizzazz-900: #4f0746;
--color-purple-pizzazz-950: #34002e;
}SCSS
$purple-pizzazz: #fd54dd;
$purple-pizzazz-rgb: 253, 84, 221;
$purple-pizzazz-light: mix(#fff, $purple-pizzazz, 20%);
$purple-pizzazz-dark: mix(#000, $purple-pizzazz, 20%);
.element {
color: $purple-pizzazz;
box-shadow: 0 0 0 2px rgba($purple-pizzazz, 0.35);
}