#F18ABC

Accessibility

AAA

9.1:1

Vs white / black

2.31:1 · 9.1:1

Sources

Library color

Codes

Formats

HEX

#f18abc

RGB

rgb(241, 138, 188)

RGBA

rgba(241, 138, 188, 1)

HSL

hsl(331, 79%, 74%)

HSLA

hsla(331, 79%, 74%, 1)

HSV

hsv(331, 43%, 95%)

LAB

lab(69.83% 45.27 -8.86)

LCH

lch(69.83% 46.13 348.93)

OKLAB

oklab(0.7578 0.1356 -0.023)

OKLCH

oklch(0.7578 0.1375 350.37)

XYZ

xyz(54.44, 40.51, 52.52)

CMYK

cmyk(0%, 43%, 22%, 5%)

CSS

color: #f18abc;

CSS variable

--color-f18abc: #f18abc;

SCSS

$color-f18abc: #f18abc;

JavaScript

const color = "#f18abc";

TypeScript

const color: string = "#f18abc";

React

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

JSON

{ "hex": "#f18abc", "rgb": { "r": 241, "g": 138, "b": 188 }, "oklch": "oklch(0.7578 0.1375 350.37)" }

Export

Developer code

css

:root {
  --#f18abc-1: #f18abc;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

pink-400

Very different · ΔE 5.05 · #F472B6

Nearest CSS named color

HotPink

Very different · ΔE 6.47 · #FF69B4

Nearest Material color

pink-200

Noticeably different · ΔE 4.11 · #F48FB1

Nearest Bootstrap color

danger

Very different · ΔE 26.14 · #DC3545

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffdffd 100ffcff0 200ffb7de 300f99cc8 400e07bad 500c26091 600a34f7a 700843d61 800672c4a 9004a1c34 95030091f

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fef5f9 fdecf4 fce2ee fad8e9 f9cee3 f8c5de f7bbd8 f6b1d2 f5a7cd f39ec7 f294c2 f18abc dd7fac c9739d b5688d a15c7d 8d506e 79455e 64394e 502e3f 3c232f 28171f 140c10

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fef5f9 fdecf4 fce2ee fad8e9 f9cee3 f8c5de f7bbd8 f6b1d2 f5a7cd f39ec7 f294c2

Palette

Shades

Mixed toward black — depth, text, and emphasis

dd7fac c9739d b5688d a15c7d 8d506e 79455e 64394e 502e3f 3c232f 28171f 140c10

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

e889b7 de88b2 d588ad cb87a8 c286a3 b9859e af8499 a68394 9c838f 93828a 898185

Harmony

Complementary

Opposite on the color wheel for contrast

#F18ABCStop 1 #88F1BEStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#F188EFStop 1 #F18ABCStop 2 #F18A88Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#F18ABCStop 1 #BBF188Stop 2 #88BBF1Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#F18ABCStop 1 #88F18AStop 2 #88EFF1Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#5B0B32Stop 1 #A01357Stop 2 #E41B7CStop 3 #EC5FA3Stop 4 #F4A4CBStop 5

Using this color

Where #f18abc works

#F18ABC (#f18abc) sits in the red family at about 331° hue, 79% saturation, and 74% lightness. Contrast is 2.31:1 on white and 9.1:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: pink-400 (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 #f18abc as small body text on white — 2.31: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

Chakra pink 400#F687B3 Web Safe #FF99CC#FF99CC Material Pink 200#F48FB1 Tailwind pink 400#F472B6 Pico-8 Pink#FD79A8 HotPink#FF69B4 Tailwind pink 300#F9A8D4 Chakra pink 500#ED64A6 Web Safe #FF66CC#FF66CC Web Safe #FF6699#FF6699 PaleVioletRed#DB7093 Plum#DDA0DD

Where #f18abc works

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes

text or icons on charcoal / dark mode

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