What are the hex codes in the Hot Pink & Cotton Candy Tale palette?

The Hot Pink & Cotton Candy Tale color palette consists of Hot Pink #FF75AC, Cotton Candy #FFB1D4, Space #1A305D, Snow #FAFAFD.

How should I use the Hot Pink & Cotton Candy Tale palette on a website?

Use Snow #FAFAFD as the background, Space #1A305D for text, Hot Pink #FF75AC for buttons and links, and Cotton Candy #FFB1D4 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Snow at 12.41:1.

Which colors in Hot Pink & Cotton Candy Tale have enough contrast for text?

The highest-contrast pair is #1A305D on #FAFAFD with a ratio of 12.41:1, which passes WCAG AA for normal text.

#FF75ACHot Pink

#FFB1D4Cotton Candy

#1A305DSpace

#FAFAFDSnow

Hot Pink & Cotton Candy Tale color palette

Modern Pink White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hot Pink	`#FF75AC`	`rgb(255, 117, 172)`	`hsl(336, 100%, 73%)`	`oklch(74.1% 0.176 357)`
Cotton Candy	`#FFB1D4`	`rgb(255, 177, 212)`	`hsl(333, 100%, 85%)`	`oklch(84.4% 0.100 351)`
Space	`#1A305D`	`rgb(26, 48, 93)`	`hsl(220, 56%, 23%)`	`oklch(31.8% 0.085 263)`
Snow	`#FAFAFD`	`rgb(250, 250, 253)`	`hsl(240, 43%, 99%)`	`oklch(98.6% 0.004 286)`

Why it works and how to use it

Hot Pink & Cotton Candy Tale is a vivid split color palette tagged modern, pink, white. A split scheme: Hot Pink plays against Space across roughly 116° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Hot Pink takes the lead while the rest support. Lightness runs from 23% to 99%. Well suited to websites, presentations and branding.

Background: Snow (#FAFAFD) is the lightest color, so it belongs on large surfaces.
Text: Space (#1A305D) on #FAFAFD gives 12.41:1, passing WCAG AAA.
Primary: Hot Pink (#FF75AC) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cotton Candy (#FFB1D4) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Snow at 12.41:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Hot Pink & Cotton Candy Tale

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#FF75AC

#FFB1D4

#1A305D

#FAFAFD

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#1A305D` on `#FAFAFD`	Aa	12.41:1	AAA
`#FFB1D4` on `#1A305D`	Aa	7.69:1	AAA
`#FF75AC` on `#1A305D`	Aa	5.17:1	AA
`#FF75AC` on `#FAFAFD`	Aa	2.4:1	Fail
`#FFB1D4` on `#FAFAFD`	Aa	1.61:1	Fail
`#FF75AC` on `#FFB1D4`	Aa	1.49:1	Fail

:root {
  --hot-pink: #FF75AC;
  --cotton-candy: #FFB1D4;
  --space: #1A305D;
  --snow: #FAFAFD;
}

$hot-pink: #FF75AC;
$cotton-candy: #FFB1D4;
$space: #1A305D;
$snow: #FAFAFD;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'hot-pink': '#FF75AC',
        'cotton-candy': '#FFB1D4',
        'space': '#1A305D',
        'snow': '#FAFAFD',
      },
    },
  },
};

{
  "name": "Hot Pink & Cotton Candy Tale",
  "colors": [
    "#FF75AC",
    "#FFB1D4",
    "#1A305D",
    "#FAFAFD"
  ]
}

background: linear-gradient(135deg, #FF75AC, #FFB1D4, #1A305D, #FAFAFD);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-10 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood