Pink is not a spectral colour but a tint of red — light red with the saturation kept high. The pinks on this page run from 334° to 349°, just short of pure red at 0°. Grab the HEX codes from a scheme below, or build a custom pink palette around any base colour with the generator.
Pink Palette Ideas & HEX Codes
Hot Pink is the only set with real depth, dropping to #590D22 and #A4133C. Soft Pink and Pink Blush are both tint ramps with nothing below 68% lightness, and they differ mainly in how far the top end goes toward white.
Hot Pink
#590D22
#A4133C
#C9184A
#FF4D6D
#FF758F
Soft Pink
#FFF0F3
#FFCCD5
#FFB3C1
#FF8FAB
#FF5DA2
Pink Blush
#FFE5EC
#FFC2D1
#FFB3C6
#FF8FAB
#FB6F92
Anchored to a pink base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Free, no sign-up Generated in your browser CSS, JSON & HEX export
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
What Goes With Pink
Pink covers more ground than any other single name here, so the partner depends on which pink: a hot #FF4D6D wants black or a deep navy behind it, while a soft #FFCCD5 wants cream and a sage green. Magenta is the bolder neighbour and blush the quieter one. Beauty, fashion, confectionery and events branding use it.
Frequently Asked Questions
What HEX codes make a pink palette?
Pink palettes work best across a lightness range: a deep anchor like #A4133C or #C9184A, a vivid mid pink (#FF4D6D, #FF5DA2) and pale blush tints (#FFB3C1, #FFF0F3) for backgrounds. Warm pinks read friendly; cooler magenta pinks feel bolder. Above you get three ready-made versions — Hot Pink, Soft Pink and Pink Blush — so you can lift a whole five-step ramp instead of assembling one. #590D22 is the darkest code on the page and #FFF0F3 the lightest, a pairing worth 12.6:1, enough for body text at any size under WCAG AA and AAA.
What is the HEX code for hot pink?
The HEX code for hot pink is #FF69B4 — the CSS keyword hotpink — at 330° hue and 71% lightness. The Hot Pink set below uses #FF4D6D and #FF758F instead — a few degrees redder, which reads warmer. Neither carries white text at readable contrast, so both need dark type on them or a dark ground behind them.
How do I use these colours in CSS?
Click Copy CSS for a ready-to-paste :root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. If a ready-made set is easier, the Hot Pink row above reads #590D22 through #FF758F and you can type those five in as the custom properties yourself. The generator instead rolls around #FF5DA2, the base pink this page is anchored to. Copy JSON gives an array and Copy HEX a comma-separated line when a :root block is not what your project wants.
What are the RGB and HSL values for pink?
The base pink this page is anchored to is #FF5DA2, which is rgb(255, 93, 162) and hsl(334, 100%, 68%). A hue of 334 degrees puts it in the magentas and purples, and 68% lightness with 100% saturation makes it a mid tone. The colour picker above accepts HEX or R, G and B numbers directly, so you can type any of those in and rebuild the palette around it. The other codes in the sets above are steps around that base: lighter, darker, or nudged a little along the hue.