#FF4553 + #BF4C5B + #805467 + #405C72 + #00647C · 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

#FF4553

Peach Pink · Tomato · Coral Red

HEX

#FF4553

RGB

rgb(255, 69, 83)

HSL

hsl(355, 100%, 64%)

HSB

hsb(355, 73%, 100%)

CMYK

cmyk(0%, 73%, 67%, 0%)

Oklch

oklch(66.7% 0.221 21.8)

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

#BF4C5B

Crimson · Sienna · Passion Red

HEX

#BF4C5B

RGB

rgb(191, 76, 91)

HSL

hsl(352, 47%, 52%)

HSB

hsb(352, 60%, 75%)

CMYK

cmyk(0%, 60%, 52%, 25%)

Oklch

oklch(57.2% 0.148 15.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#805467

Dark Violet · DimGray · Camellia

HEX

#805467

RGB

rgb(128, 84, 103)

HSL

hsl(334, 21%, 42%)

HSB

hsb(334, 34%, 50%)

CMYK

cmyk(0%, 34%, 20%, 50%)

Oklch

oklch(50.0% 0.064 352.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#405C72

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#405C72

RGB

rgb(64, 92, 114)

HSL

hsl(206, 28%, 35%)

HSB

hsb(206, 44%, 45%)

CMYK

cmyk(44%, 19%, 0%, 55%)

Oklch

oklch(46.2% 0.049 242.7)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#00647C

Lake Blue · Teal · Peacock Green

HEX

#00647C

RGB

rgb(0, 100, 124)

HSL

hsl(192, 100%, 24%)

HSB

hsb(192, 100%, 49%)

CMYK

cmyk(100%, 19%, 0%, 51%)

Oklch

oklch(46.6% 0.086 221.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4553

47FFF0

Analogous

FF47B2

FF4553

FF9447

Triadic

FF4553

57FF47

4757FF

Split-Comp.

FF4553

47FF94

47B3FF

Tetradic

FF4553

B3FF47

47FFF0

9447FF

Contrast Matrix WCAG 2.1 Contrast

FF4553	BF4C5B	805467	405C72	00647C
—	1.4 Fail	1.8 Fail	2.1 Fail	2.0 Fail
1.4 Fail	—	1.3 Fail	1.5 Fail	1.4 Fail
1.8 Fail	1.3 Fail	—	1.1 Fail	1.1 Fail
2.1 Fail	1.5 Fail	1.1 Fail	—	1.0 Fail
2.0 Fail	1.4 Fail	1.1 Fail	1.0 Fail	—

White BG

3.4AA Large

4.8AA

6.2AA

7.0AAA

6.7AA

Black BG

6.2AA

4.4AA Large

3.4AA Large

3.0Fail

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAD50

8D8C57

6D6D62

4C4C6D

2B2C76

Deuteranopia

B9C74F

949D57

707361

4B486B

261E75

Tritanopia

F64D4C

B95554

7E5F5E

416868

057271

Achromatopsia

7E7E7E

707070

636363

565656

494949

Shades & Tints Shades & Tints

#FF4553

Dark

Light

#BF4C5B

Dark

Light

#805467

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4553;
  --color-2: #bf4c5b;
  --color-3: #805467;
  --color-4: #405c72;
  --color-5: #00647c;
}

SCSS

$color-1: #ff4553;
$color-2: #bf4c5b;
$color-3: #805467;
$color-4: #405c72;
$color-5: #00647c;

TAILWIND

colors: {
  'brand-1': '#ff4553',
  'brand-2': '#bf4c5b',
  'brand-3': '#805467',
  'brand-4': '#405c72',
  'brand-5': '#00647c',
}

RGB Array

[255, 69, 83], [191, 76, 91], [128, 84, 103], [64, 92, 114], [0, 100, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FF4553, #BF4C5B, #805467, #405C72, #00647C 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: #ff4553; --color-2: #bf4c5b; --color-3: #805467; --color-4: #405c72; --color-5: #00647c. 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