#403D6A + #5761A6 + #AEB44A + #F9BE08 + #DF5200 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#403D6A

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#403D6A

RGB

rgb(64, 61, 106)

HSL

hsl(244, 27%, 33%)

HSB

hsb(244, 42%, 42%)

CMYK

cmyk(40%, 42%, 0%, 58%)

Oklch

oklch(38.5% 0.075 285.3)

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

#5761A6

Indigo · SteelBlue · Navy Blue

HEX

#5761A6

RGB

rgb(87, 97, 166)

HSL

hsl(232, 31%, 50%)

HSB

hsb(232, 48%, 65%)

CMYK

cmyk(48%, 42%, 0%, 35%)

Oklch

oklch(51.7% 0.109 275.7)

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

#AEB44A

Autumn Sage · GoldenRod · Honey Gold

HEX

#AEB44A

RGB

rgb(174, 180, 74)

HSL

hsl(63, 42%, 50%)

HSB

hsb(63, 59%, 71%)

CMYK

cmyk(3%, 0%, 59%, 29%)

Oklch

oklch(74.4% 0.129 112.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F9BE08

Ochre · Orange · Honey Gold

HEX

#F9BE08

RGB

rgb(249, 190, 8)

HSL

hsl(45, 95%, 50%)

HSB

hsb(45, 97%, 98%)

CMYK

cmyk(0%, 24%, 97%, 2%)

Oklch

oklch(83.2% 0.169 85.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#DF5200

Tangerine · OrangeRed · Amber Brown

HEX

#DF5200

RGB

rgb(223, 82, 0)

HSL

hsl(22, 100%, 44%)

HSB

hsb(22, 100%, 87%)

CMYK

cmyk(0%, 63%, 100%, 13%)

Oklch

oklch(62.1% 0.190 41.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403D6A

686B3D

Analogous

3D516B

403D6A

573D6B

Triadic

403D6A

6B403D

3D6B40

Split-Comp.

403D6A

6B573D

516B3D

Tetradic

403D6A

6B3D51

686B3D

3D6B57

Contrast Matrix WCAG 2.1 Contrast

403D6A	5761A6	AEB44A	F9BE08	DF5200
—	1.8 Fail	4.5 AA	5.9 AA	2.6 Fail
1.8 Fail	—	2.6 Fail	3.4 AA Large	1.5 Fail
4.5 AA	2.6 Fail	—	1.3 Fail	1.8 Fail
5.9 AA	3.4 AA Large	1.3 Fail	—	2.3 Fail
2.6 Fail	1.5 Fail	1.8 Fail	2.3 Fail	—

White BG

10.0AAA

5.7AA

2.2Fail

1.7Fail

3.9AA Large

Black BG

2.1Fail

3.7AA Large

9.4AAA

12.4AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F5F

5B5B95

B1B164

DFDF34

A2A114

Deuteranopia

3F3F5C

5B5A91

B0B06A

E3E73F

AAB519

Tritanopia

405755

578885

AE787C

F6575E

D82427

Achromatopsia

434343

666666

A6A6A6

BBBBBB

737373

Shades & Tints Shades & Tints

#403D6A

Dark

Light

#5761A6

Dark

Light

#AEB44A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403d6a;
  --color-2: #5761a6;
  --color-3: #aeb44a;
  --color-4: #f9be08;
  --color-5: #df5200;
}

SCSS

$color-1: #403d6a;
$color-2: #5761a6;
$color-3: #aeb44a;
$color-4: #f9be08;
$color-5: #df5200;

TAILWIND

colors: {
  'brand-1': '#403d6a',
  'brand-2': '#5761a6',
  'brand-3': '#aeb44a',
  'brand-4': '#f9be08',
  'brand-5': '#df5200',
}

RGB Array

[64, 61, 106], [87, 97, 166], [174, 180, 74], [249, 190, 8], [223, 82, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #403D6A, #5761A6, #AEB44A, #F9BE08, #DF5200 is ideal for: corporate websites, product showcases, portfolios. 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: #403d6a; --color-2: #5761a6; --color-3: #aeb44a; --color-4: #f9be08; --color-5: #df5200. 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. 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