What is the HEX code for First Date?

First Date uses #fab1a0. Copy HEX for design tools, or the CSS variable and Tailwind token from this page. Verify 14px text contrast before using it as body copy on white.

Which color family does First Date belong to?

First Date is in the red family. Use the tints for surfaces and the shades for icons; the family psychology note is a starting mood, not a license to skip WCAG.

Red

First Date

#FAB1A0

Accessibility

AAA

11.86:1

Vs white / black

1.77:1 · 11.86:1

Sources

flat-ui

Codes

Formats

HEX

#fab1a0

RGB

rgb(250, 177, 160)

RGBA

rgba(250, 177, 160, 1)

HSL

hsl(11, 90%, 80%)

HSLA

hsla(11, 90%, 80%, 1)

HSV

hsv(11, 36%, 98%)

LAB

lab(78.64% 24.51 19.35)

LCH

lch(78.64% 31.23 38.29)

OKLAB

oklab(0.8251 0.0745 0.0494)

OKLCH

oklch(0.8251 0.0894 33.55)

XYZ

xyz(61.49, 54.31, 40.49)

CMYK

cmyk(0%, 29%, 36%, 2%)

CSS

color: #fab1a0;

CSS variable

--color-fab1a0: #fab1a0;

SCSS

$color-fab1a0: #fab1a0;

JavaScript

const color = "#fab1a0";

TypeScript

const color: string = "#fab1a0";

React

style={{ backgroundColor: "#fab1a0" }}

JSON

{ "hex": "#fab1a0", "rgb": { "r": 250, "g": 177, "b": 160 }, "oklch": "oklch(0.8251 0.0894 33.55)" }

Export

Developer code

css

:root {
  --first-date-1: #fab1a0;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

red-300

Very different · ΔE 6.84 · #FCA5A5

Nearest CSS named color

LightSalmon

Very different · ΔE 7.71 · #FFA07A

Nearest Material color

deep-orange-200

Noticeably different · ΔE 3.48 · #FFAB91

Nearest Bootstrap color

Same hue, varied lightness and saturation

#611605Stop 1 #AA2609Stop 2 #F2370DStop 3 #F67355Stop 4 #FAAF9EStop 5

Using this color

Where #fab1a0 works

First Date (#fab1a0) sits in the red family at about 11° hue, 90% saturation, and 80% lightness. Contrast is 1.77:1 on white and 11.86:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: red-300 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes
text or icons on charcoal / dark mode

Do not use #fab1a0 as small body text on white — 1.77:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Material Deep Orange 200#FFAB91 Spectrum #ED9B7E#ED9B7E Tailwind red 300#FCA5A5 Material Deep Orange 100#FFCCBC Spectrum #DE9782#DE9782 Spectrum #DA9F86#DA9F86 Spectrum #E9A481#E9A481 LightSalmon#FFA07A DarkSalmon#E9967A Material Red 200#EF9A9A Web Safe #FF9999#FF9999 Spectrum #E28D7E#E28D7E