HomeDevPink color codes
Color tools

Pink color codes

Pink color codes for #FFC0CB — HEX, RGB, HSL, HSV, shades, named pinks, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for pink, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named pink shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS pink#FFC0CB = rgb(255, 192, 203) = hsl(350°, 100%, 88%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (mint/sage green)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base pink

CSS keyword

color: pink;
#FFC0CB · rgb(255, 192, 203)
ϟ

Related shade

Family neighbor

lightpink
#FFB6C1
ϟ

UI accent

Background use

background-color: #FFC0CB;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward mint/sage green

Pink color family specification

Version 1.0.0

Definition
Pink in CSS centers on the keyword pink (#FFC0CB / rgb(255, 192, 203) / hsl(350°, 100%, 88%)). Designers use pink families for soft, playful, and romantic on screens.
What it calculates
Pink family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Pink ranges from baby soft to hot fashion accents. Match saturation to brand tone.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --pink: #ffc0cb;
  --pink-hot: #ff69b4;
  --pink-deep: #c71585;
}

.banner {
  background-color: var(--pink);
  color: #ffffff;
}
Popular CSS pinks
NameHEXRGBFeel
pink#FFC0CB255, 192, 203Base keyword
lightpink#FFB6C1255, 182, 193Light tint
hotpink#FF69B4255, 105, 180Named shade
deeppink#FF1493255, 20, 147Dark shade
palevioletred#DB7093219, 112, 147Light tint
lavenderblush#FFF0F5255, 240, 245Light tint
magenta#FF00FF255, 0, 255Named shade
mediumvioletred#C71585199, 21, 133Mid tone
i Related hues may appear in Named shades when useful for pink-adjacent palettes.
Assumptions
  • Base keyword pink = #FFC0CB in sRGB.
  • Named list uses CSS Color Module keywords in/near the pink family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
pink → #FFC0CB; complementary toward mint/sage green
Validation cases
  • pink → #FFC0CB
  • hotpink → #FF69B4
  • shade of pink → same hue, lower lightness
  • tint of pink → same hue, higher lightness
Sources
  • CSS Color Module named colors (pink family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Magenta color codes › ◉ Red color codes › ◉ Purple color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for pink?

The CSS named color pink is #FFC0CB, equal to rgb(255, 192, 203) and hsl(350°, 100%, 88%).

What is the difference between pink and hotpink?

Pink is pale and soft. Hotpink is saturated for stronger accents.

What colors go with pink?

Charcoal, cream, and soft teal balance pink. Gold accents feel boutique. Always check text contrast.

Is pink good for body text?

Keyword pink on white fails AA—use deeppink/mediumvioletred for text, or dark text on pink surfaces.

How do I use pink in CSS?

Use color: pink;, color: #FFC0CB;, or color: rgb(255, 192, 203); on any property that accepts a <color> value, including background-color and border-color.