← Back to Editor

#F4BBAE · #CF909F · #9C7E99 · #6A6A89 · #575E79

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F4BBAE

Peach Pink · LightPink · Cherry Blossom

HEX
#F4BBAE
RGB
rgb(244, 187, 174)
HSL
hsl(11, 76%, 82%)
HSB
hsb(11, 29%, 96%)
CMYK
cmyk(0%, 23%, 29%, 4%)
Oklch
oklch(84.0% 0.069 33.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#CF909F

Peach Pink · Tan · Coral Red

HEX
#CF909F
RGB
rgb(207, 144, 159)
HSL
hsl(346, 40%, 69%)
HSB
hsb(346, 30%, 81%)
CMYK
cmyk(0%, 30%, 23%, 19%)
Oklch
oklch(72.0% 0.079 3.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#9C7E99

Rose Purple · Gray · Violet

HEX
#9C7E99
RGB
rgb(156, 126, 153)
HSL
hsl(306, 13%, 55%)
HSB
hsb(306, 19%, 61%)
CMYK
cmyk(0%, 19%, 2%, 39%)
Oklch
oklch(63.0% 0.053 329.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#6A6A89

Deep Indigo · SlateGray · Navy Blue

HEX
#6A6A89
RGB
rgb(106, 106, 137)
HSL
hsl(240, 13%, 48%)
HSB
hsb(240, 23%, 54%)
CMYK
cmyk(23%, 23%, 0%, 46%)
Oklch
oklch(53.6% 0.048 284.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#575E79

Indigo · DimGray · Navy Blue

HEX
#575E79
RGB
rgb(87, 94, 121)
HSL
hsl(228, 16%, 41%)
HSB
hsb(228, 28%, 47%)
CMYK
cmyk(28%, 22%, 0%, 53%)
Oklch
oklch(48.6% 0.044 273.3)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4BBAE
AEE7F4

Analogous

F4AEC4
F4BBAE
F4DEAE

Triadic

F4BBAE
AEF4BB
BBAEF4

Split-Comp.

F4BBAE
AEF4DE
AEC4F4

Tetradic

F4BBAE
C4F4AE
AEE7F4
DEAEF4

Contrast Matrix WCAG 2.1 Contrast

F4BBAE
CF909F
9C7E99
6A6A89
575E79
—
1.5
Fail
2.1
Fail
3.1
AA Large
3.8
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
2.5
Fail
2.1
Fail
1.4
Fail
—
1.5
Fail
1.8
Fail
3.1
AA Large
2.0
Fail
1.5
Fail
—
1.2
Fail
3.8
AA Large
2.5
Fail
1.8
Fail
1.2
Fail
—
White BG
1.7Fail
2.6Fail
3.6AA Large
5.2AA
6.4AA
Black BG
12.6AAA
8.1AAA
5.9AA
4.0AA Large
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBB1
B4B39B
8F8F92
6A6A81
5A5A72

Deuteranopia

DFE3B2
B7BC9B
919391
6A6A80
5A5971

Tritanopia

F1B4B4
CC9998
9B8D8C
6A7C7A
576D6C

Achromatopsia

CBCBCB
A5A5A5
8A8A8A
6E6E6E
5F5F5F

Shades & Tints Shades & Tints

#F4BBAE

Dark
Light

#CF909F

Dark
Light

#9C7E99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4bbae;
  --color-2: #cf909f;
  --color-3: #9c7e99;
  --color-4: #6a6a89;
  --color-5: #575e79;
}

SCSS

$color-1: #f4bbae;
$color-2: #cf909f;
$color-3: #9c7e99;
$color-4: #6a6a89;
$color-5: #575e79;

TAILWIND

colors: {
  'brand-1': '#f4bbae',
  'brand-2': '#cf909f',
  'brand-3': '#9c7e99',
  'brand-4': '#6a6a89',
  'brand-5': '#575e79',
}

RGB Array

[244, 187, 174], [207, 144, 159], [156, 126, 153], [106, 106, 137], [87, 94, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F4BBAE, #CF909F, #9C7E99, #6A6A89, #575E79 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4bbae; --color-2: #cf909f; --color-3: #9c7e99; --color-4: #6a6a89; --color-5: #575e79. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This sea-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color