Named color · #FF0FF3
Barbara
Barbara is #FF0FF3: rgb(255 15 243), hsl(303 100% 53%), oklch(0.697 0.312 331). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Barbara color name →
#FF0FF3
oklch(0.697 0.312 331)
Color conversions
- HEX
- #ff0ff3
- RGB
- rgb(255 15 243)
- HSL
- hsl(303 100% 53%)
- HWB
- hwb(303 6% 0%)
- OKLCH
- oklch(0.697 0.312 331)
- OKLab
- oklab(0.697 0.273 -0.151)
- CIE Lab
- lab(59.91 91.47 -54.25)
- LCH
- lch(59.91 106.35 329.3)
- CMYK
- cmyk(0% 94% 5% 0%)
Tints · Shades · Tones
Tints
- FF47F5
- FF64F7
- FF7DF9
- FF92FB
- FFA6FC
- FFB9FD
- FFCBFE
- FFDCFF
- FFEEFF
Shades
- DE0BD3
- BE08B4
- 9E0597
- 80037A
- 63025E
- 480144
- 2E002B
- 160014
- 030003
Tones
- F335E8
- E747DC
- DB55D1
- CF5FC5
- C367BA
- B66EAE
- AA74A3
- 9C7897
- 8F7D8C
Color harmonies
Complementary +180°
- FF0FF3
Barbara
- 00BC5C
≈ Intoxicate
Analogous -30° +30°
- FF0FF3
Barbara
- B37CFF
≈ Illicit Purple
- FF5596
≈ Fuchsia Fever
Triadic +120° +240°
- FF0FF3
Barbara
- BF9900
≈ Rapeseed
- 00B1C8
≈ Havasupai Falls
Split-complementary +150° +210°
- FF0FF3
Barbara
- 8FAC00
≈ Gameboy Screen
- 00B6A2
≈ Aare River
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.17:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.61:1 · APCA Lc 45
Best text color: #000000
WCAG 6.61:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--barbara: #ff0ff3;
--barbara-rgb: 255 15 243;
--barbara-oklch: oklch(0.697 0.312 331);
}
.element {
color: var(--barbara);
background-color: hsl(303 100% 53%);
border-color: oklch(0.697 0.312 331);
}Tailwind CSS v4
@theme {
--color-barbara: #ff0ff3;
--color-barbara-50: #ffd4ff;
--color-barbara-100: #ffbfff;
--color-barbara-200: #ff9cff;
--color-barbara-300: #ff6bfa;
--color-barbara-400: #fc2cf0;
--color-barbara-500: #eb00e1;
--color-barbara-600: #c600bd;
--color-barbara-700: #9f0098;
--color-barbara-800: #750075;
--color-barbara-900: #530052;
--color-barbara-950: #370037;
}SCSS
$barbara: #ff0ff3;
$barbara-rgb: 255, 15, 243;
$barbara-light: mix(#fff, $barbara, 20%);
$barbara-dark: mix(#000, $barbara, 20%);
.element {
color: $barbara;
box-shadow: 0 0 0 2px rgba($barbara, 0.35);
}