← Back to Editor

#AF9588 · #F8FDBD · #F9AD4B · #D98C3C · #2E2E2C

sea

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#AF9588

Apricot · DarkGray · Warm Sun

HEX
#AF9588
RGB
rgb(175, 149, 136)
HSL
hsl(20, 20%, 61%)
HSB
hsb(20, 22%, 69%)
CMYK
cmyk(0%, 15%, 22%, 31%)
Oklch
oklch(69.0% 0.036 48.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F8FDBD

Fresh Green · Bisque · Lemon Cream

HEX
#F8FDBD
RGB
rgb(248, 253, 189)
HSL
hsl(65, 94%, 87%)
HSB
hsb(65, 25%, 99%)
CMYK
cmyk(2%, 0%, 25%, 1%)
Oklch
oklch(97.5% 0.082 111.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9AD4B

Ginger · SandyBrown · Warm Sun

HEX
#F9AD4B
RGB
rgb(249, 173, 75)
HSL
hsl(34, 94%, 64%)
HSB
hsb(34, 70%, 98%)
CMYK
cmyk(0%, 31%, 70%, 2%)
Oklch
oklch(80.4% 0.143 69.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D98C3C

Ginger · GoldenRod · Warm Sun

HEX
#D98C3C
RGB
rgb(217, 140, 60)
HSL
hsl(31, 67%, 54%)
HSB
hsb(31, 72%, 85%)
CMYK
cmyk(0%, 35%, 72%, 15%)
Oklch
oklch(70.5% 0.132 63.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#2E2E2C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2E2E2C
RGB
rgb(46, 46, 44)
HSL
hsl(60, 2%, 18%)
HSB
hsb(60, 4%, 18%)
CMYK
cmyk(0%, 0%, 4%, 82%)
Oklch
oklch(30.0% 0.004 106.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF9588
88A2AF

Analogous

AF888E
AF9588
AFA988

Triadic

AF9588
88AF95
9588AF

Split-Comp.

AF9588
88AFA9
888EAF

Tetradic

AF9588
8EAF88
88A2AF
A988AF

Contrast Matrix WCAG 2.1 Contrast

AF9588
F8FDBD
F9AD4B
D98C3C
2E2E2C
—
2.6
Fail
1.5
Fail
1.0
Fail
4.8
AA
2.6
Fail
—
1.8
Fail
2.5
Fail
12.8
AAA
1.5
Fail
1.8
Fail
—
1.4
Fail
7.2
AAA
1.0
Fail
2.5
Fail
1.4
Fail
—
5.0
AA
4.8
AA
12.8
AAA
7.2
AAA
5.0
AA
—
White BG
2.8Fail
1.1Fail
1.9Fail
2.7Fail
13.6AAA
Black BG
7.5AAA
19.8AAA
11.1AAA
7.8AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A48B
FAFACC
D8D763
B8B74F
2E2E2C

Deuteranopia

A5A78C
FAFAD0
DDE268
BCC254
2E2E2D

Tritanopia

AE8E8E
F8D9DB
F5757A
D55F62
2E2D2D

Achromatopsia

9B9B9B
F4F4F4
B9B9B9
9A9A9A
2E2E2E

Shades & Tints Shades & Tints

#AF9588

Dark
Light

#F8FDBD

Dark
Light

#F9AD4B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af9588;
  --color-2: #f8fdbd;
  --color-3: #f9ad4b;
  --color-4: #d98c3c;
  --color-5: #2e2e2c;
}

SCSS

$color-1: #af9588;
$color-2: #f8fdbd;
$color-3: #f9ad4b;
$color-4: #d98c3c;
$color-5: #2e2e2c;

TAILWIND

colors: {
  'brand-1': '#af9588',
  'brand-2': '#f8fdbd',
  'brand-3': '#f9ad4b',
  'brand-4': '#d98c3c',
  'brand-5': '#2e2e2c',
}

RGB Array

[175, 149, 136], [248, 253, 189], [249, 173, 75], [217, 140, 60], [46, 46, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #AF9588, #F8FDBD, #F9AD4B, #D98C3C, #2E2E2C 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: #af9588; --color-2: #f8fdbd; --color-3: #f9ad4b; --color-4: #d98c3c; --color-5: #2e2e2c. 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