Pick, paste a hex code, or drop an image anywhere on this card. Images stay on your device.
Colours that match #FF8DD3
Complementary
Opposite on the wheel. High contrast; let one colour lead.
Analogous
Neighbours on the wheel. Calm and natural.
Triadic
Three evenly spaced hues. Lively; use with restraint.
Split complementary
The base plus both neighbours of its opposite. Easier to balance.
Tetradic
Two complementary pairs. Rich; pick one to dominate.
Monochromatic
One hue, different lightness. The safest palette there is.
Tints, shades and neutrals for UI
Primary scale
Light steps for backgrounds, middle for buttons, dark for text and hover.
Matching neutrals
Greys tinted towards your colour, so the whole palette shares one temperature.
Contrast check
Body text needs 4.5:1 (AA). Large text and icons need 3:1.
Live preview
Export
CSS variables for the primary scale, neutrals and accent.
:root {
--primary: #ff8dd3;
--primary-50: #fef0f9;
--primary-100: #fdddf1;
--primary-200: #ffb3e1;
--primary-300: #ff80ce;
--primary-400: #ff47b8;
--primary-500: #ff0fa2;
--primary-600: #e0008a;
--primary-700: #b3006e;
--primary-800: #850051;
--primary-900: #570035;
--neutral-50: #faf9fa;
--neutral-100: #efecee;
--neutral-200: #dcd5da;
--neutral-300: #c5bac1;
--neutral-400: #ab9ba5;
--neutral-500: #927c8a;
--neutral-600: #7a6673;
--neutral-700: #61515b;
--neutral-800: #483c44;
--neutral-900: #2f272c;
--accent: #8dffb9;
}How it works
From one colour to a palette you can ship, in five steps.
- 1
Choose a colour
Use the picker, paste a hex code, press Random, or pull colours from a photo or screenshot.
- 2
Pick a harmony
Complementary for energy, analogous for calm, monochromatic when in doubt. Click a swatch to copy it.
- 3
Build the UI palette
Primary scale for buttons, backgrounds and hover. Tinted neutrals for text, borders and surfaces.
- 4
Check contrast
Make sure text passes on your primary colour before you design with it.
- 5
Export and share
Copy the CSS variables, or copy the link to share the exact palette.
Learn more about colour
Guides that go deeper on everything this tool does.
FAQ
How do I find colours that go together?+
Can I get a colour palette from an image?+
What are tints, shades and neutrals for?+
What contrast ratio do I need?+
Is the Color Match Finder free?+
More free tools
Same idea, no sign-up, nothing uploaded.
Keep the palettes you find
GetRef saves screenshots, links and palettes in one place and finds them when you describe them. Hex codes in your notes become searchable.
