← Back to Editor

#F14D4C · #445756 · #4F705B · #709C5F · #BDA26C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F14D4C

Peach Pink · Tomato · Coral Red

HEX
#F14D4C
RGB
rgb(241, 77, 76)
HSL
hsl(0, 85%, 62%)
HSB
hsb(0, 68%, 95%)
CMYK
cmyk(0%, 68%, 68%, 5%)
Oklch
oklch(65.0% 0.201 25.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#445756

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#445756
RGB
rgb(68, 87, 86)
HSL
hsl(177, 12%, 30%)
HSB
hsb(177, 22%, 34%)
CMYK
cmyk(22%, 0%, 1%, 66%)
Oklch
oklch(44.1% 0.023 192.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4F705B

Celadon · DimGray · Forest Green

HEX
#4F705B
RGB
rgb(79, 112, 91)
HSL
hsl(142, 17%, 37%)
HSB
hsb(142, 29%, 44%)
CMYK
cmyk(29%, 0%, 19%, 56%)
Oklch
oklch(51.3% 0.051 156.2)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#709C5F

Celadon · Gray · Olive Green

HEX
#709C5F
RGB
rgb(112, 156, 95)
HSL
hsl(103, 24%, 49%)
HSB
hsb(103, 39%, 61%)
CMYK
cmyk(28%, 0%, 39%, 39%)
Oklch
oklch(64.5% 0.100 137.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#BDA26C

Ginger · Tan · Sunflower

HEX
#BDA26C
RGB
rgb(189, 162, 108)
HSL
hsl(40, 38%, 58%)
HSB
hsb(40, 43%, 74%)
CMYK
cmyk(0%, 14%, 43%, 26%)
Oklch
oklch(72.4% 0.078 84.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F14D4C
4CF0F0

Analogous

F04C9E
F14D4C
F09E4C

Triadic

F14D4C
4CF04C
4C4CF0

Split-Comp.

F14D4C
4CF09E
4C9EF0

Tetradic

F14D4C
9EF04C
4CF0F0
9E4CF0

Contrast Matrix WCAG 2.1 Contrast

F14D4C
445756
4F705B
709C5F
BDA26C
—
2.2
Fail
1.6
Fail
1.1
Fail
1.4
Fail
2.2
Fail
—
1.4
Fail
2.4
Fail
3.1
AA Large
1.6
Fail
1.4
Fail
—
1.7
Fail
2.2
Fail
1.1
Fail
2.4
Fail
1.7
Fail
—
1.3
Fail
1.4
Fail
3.1
AA Large
2.2
Fail
1.3
Fail
—
White BG
3.6AA Large
7.7AAA
5.5AA
3.2AA Large
2.5Fail
Black BG
5.9AA
2.7Fail
3.8AA Large
6.6AA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA94C
4C4C56
5D5E60
83836E
B1B179

Deuteranopia

B4C04C
4B4A56
5B5961
817D71
B3B57C

Tritanopia

E94C4C
455656
516465
72797C
BC8386

Achromatopsia

7E7E7E
515151
646464
888888
A4A4A4

Shades & Tints Shades & Tints

#F14D4C

Dark
Light

#445756

Dark
Light

#4F705B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f14d4c;
  --color-2: #445756;
  --color-3: #4f705b;
  --color-4: #709c5f;
  --color-5: #bda26c;
}

SCSS

$color-1: #f14d4c;
$color-2: #445756;
$color-3: #4f705b;
$color-4: #709c5f;
$color-5: #bda26c;

TAILWIND

colors: {
  'brand-1': '#f14d4c',
  'brand-2': '#445756',
  'brand-3': '#4f705b',
  'brand-4': '#709c5f',
  'brand-5': '#bda26c',
}

RGB Array

[241, 77, 76], [68, 87, 86], [79, 112, 91], [112, 156, 95], [189, 162, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F14D4C, #445756, #4F705B, #709C5F, #BDA26C 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: #f14d4c; --color-2: #445756; --color-3: #4f705b; --color-4: #709c5f; --color-5: #bda26c. 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 general-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