← Back to Editor

#347F7A · #B49962 · #C4B7A4 · #FE8C4E · #F25B7E

warm

A 5-color warm 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

#347F7A

Mineral Blue · SeaGreen · Mint Ice

HEX
#347F7A
RGB
rgb(52, 127, 122)
HSL
hsl(176, 42%, 35%)
HSB
hsb(176, 59%, 50%)
CMYK
cmyk(59%, 0%, 4%, 50%)
Oklch
oklch(54.8% 0.074 189.2)

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

#B49962

Ginger · Tan · Sunflower

HEX
#B49962
RGB
rgb(180, 153, 98)
HSL
hsl(40, 35%, 55%)
HSB
hsb(40, 46%, 71%)
CMYK
cmyk(0%, 15%, 46%, 29%)
Oklch
oklch(69.5% 0.080 84.3)

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

#C4B7A4

Goose Yellow · Tan · Warm Sun

HEX
#C4B7A4
RGB
rgb(196, 183, 164)
HSL
hsl(36, 21%, 71%)
HSB
hsb(36, 16%, 77%)
CMYK
cmyk(0%, 7%, 16%, 23%)
Oklch
oklch(78.5% 0.030 77.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FE8C4E

Apricot · Coral · Warm Sun

HEX
#FE8C4E
RGB
rgb(254, 140, 78)
HSL
hsl(21, 99%, 65%)
HSB
hsb(21, 69%, 100%)
CMYK
cmyk(0%, 45%, 69%, 0%)
Oklch
oklch(75.3% 0.158 47.4)

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

#F25B7E

Peach Pink · LightCoral · Coral Red

HEX
#F25B7E
RGB
rgb(242, 91, 126)
HSL
hsl(346, 85%, 65%)
HSB
hsb(346, 62%, 95%)
CMYK
cmyk(0%, 62%, 48%, 5%)
Oklch
oklch(67.7% 0.186 9.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

347F7A
7F3439

Analogous

347F54
347F7A
345E7F

Triadic

347F7A
7A347F
7F7A34

Split-Comp.

347F7A
7F345E
7F5434

Tetradic

347F7A
54347F
7F3439
5E7F34

Contrast Matrix WCAG 2.1 Contrast

347F7A
B49962
C4B7A4
FE8C4E
F25B7E
—
1.7
Fail
2.4
Fail
2.0
Fail
1.5
Fail
1.7
Fail
—
1.4
Fail
1.2
Fail
1.2
Fail
2.4
Fail
1.4
Fail
—
1.2
Fail
1.6
Fail
2.0
Fail
1.2
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
1.2
Fail
1.6
Fail
1.4
Fail
—
White BG
4.7AA
2.7Fail
2.0Fail
2.3Fail
3.2AA Large
Black BG
4.5AA Large
7.7AAA
10.7AAA
9.1AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54557B
A8A86F
BEBEA9
CDCC5D
B1AF76

Deuteranopia

504B7C
AAAC73
BFC0AA
D3DC61
B9C573

Tritanopia

387C7C
B37A7C
C3ACAD
F8696B
EA6F6D

Achromatopsia

686868
9B9B9B
B9B9B9
A7A7A7
8C8C8C

Shades & Tints Shades & Tints

#347F7A

Dark
Light

#B49962

Dark
Light

#C4B7A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #347f7a;
  --color-2: #b49962;
  --color-3: #c4b7a4;
  --color-4: #fe8c4e;
  --color-5: #f25b7e;
}

SCSS

$color-1: #347f7a;
$color-2: #b49962;
$color-3: #c4b7a4;
$color-4: #fe8c4e;
$color-5: #f25b7e;

TAILWIND

colors: {
  'brand-1': '#347f7a',
  'brand-2': '#b49962',
  'brand-3': '#c4b7a4',
  'brand-4': '#fe8c4e',
  'brand-5': '#f25b7e',
}

RGB Array

[52, 127, 122], [180, 153, 98], [196, 183, 164], [254, 140, 78], [242, 91, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #347F7A, #B49962, #C4B7A4, #FE8C4E, #F25B7E 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: #347f7a; --color-2: #b49962; --color-3: #c4b7a4; --color-4: #fe8c4e; --color-5: #f25b7e. 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 warm-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