← Back to Editor

#679E8B · #F5DEB0 · #380A0E · #FF3800 · #A17A3B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#679E8B

Mineral Blue · CadetBlue · Olive Green

HEX
#679E8B
RGB
rgb(103, 158, 139)
HSL
hsl(159, 22%, 51%)
HSB
hsb(159, 35%, 62%)
CMYK
cmyk(35%, 0%, 12%, 38%)
Oklch
oklch(65.5% 0.065 170.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#F5DEB0

Goose Yellow · Wheat · Lemon Cream

HEX
#F5DEB0
RGB
rgb(245, 222, 176)
HSL
hsl(40, 78%, 83%)
HSB
hsb(40, 28%, 96%)
CMYK
cmyk(0%, 9%, 28%, 4%)
Oklch
oklch(90.8% 0.065 84.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#380A0E

Vermilion · Black · Deep Berry

HEX
#380A0E
RGB
rgb(56, 10, 14)
HSL
hsl(355, 70%, 13%)
HSB
hsb(355, 82%, 22%)
CMYK
cmyk(0%, 82%, 75%, 78%)
Oklch
oklch(23.1% 0.072 20.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#FF3800

Vermilion · OrangeRed · Passion Red

HEX
#FF3800
RGB
rgb(255, 56, 0)
HSL
hsl(13, 100%, 50%)
HSB
hsb(13, 100%, 100%)
CMYK
cmyk(0%, 78%, 100%, 0%)
Oklch
oklch(65.0% 0.238 33.3)

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

#A17A3B

Ochre · Sienna · Amber Brown

HEX
#A17A3B
RGB
rgb(161, 122, 59)
HSL
hsl(37, 46%, 43%)
HSB
hsb(37, 63%, 63%)
CMYK
cmyk(0%, 24%, 63%, 37%)
Oklch
oklch(60.5% 0.094 77.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

679E8B
9E677A

Analogous

679E6F
679E8B
67959E

Triadic

679E8B
8A679E
9E8A67

Split-Comp.

679E8B
9E6795
9E6F67

Tetradic

679E8B
6F679E
9E677A
959E67

Contrast Matrix WCAG 2.1 Contrast

679E8B
F5DEB0
380A0E
FF3800
A17A3B
—
2.3
Fail
5.6
AA
1.2
Fail
1.3
Fail
2.3
Fail
—
13.1
AAA
2.7
Fail
3.0
Fail
5.6
AA
13.1
AAA
—
4.8
AA
4.4
AA Large
1.2
Fail
2.7
Fail
4.8
AA
—
1.1
Fail
1.3
Fail
3.0
Fail
4.4
AA Large
1.1
Fail
—
White BG
3.1AA Large
1.3Fail
17.2AAA
3.6AA Large
3.9AA Large
Black BG
6.8AA
16.0AAA
1.2Fail
5.8AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F90
EBEBBB
24240D
A9A70E
90904A

Deuteranopia

7C7891
ECEEBE
272A0D
B4C311
92954E

Tritanopia

6A9394
F4C4C6
360C0C
F5181B
9F5659

Achromatopsia

8B8B8B
E0E0E0
181818
6D6D6D
7E7E7E

Shades & Tints Shades & Tints

#679E8B

Dark
Light

#F5DEB0

Dark
Light

#380A0E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #679e8b;
  --color-2: #f5deb0;
  --color-3: #380a0e;
  --color-4: #ff3800;
  --color-5: #a17a3b;
}

SCSS

$color-1: #679e8b;
$color-2: #f5deb0;
$color-3: #380a0e;
$color-4: #ff3800;
$color-5: #a17a3b;

TAILWIND

colors: {
  'brand-1': '#679e8b',
  'brand-2': '#f5deb0',
  'brand-3': '#380a0e',
  'brand-4': '#ff3800',
  'brand-5': '#a17a3b',
}

RGB Array

[103, 158, 139], [245, 222, 176], [56, 10, 14], [255, 56, 0], [161, 122, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #679E8B, #F5DEB0, #380A0E, #FF3800, #A17A3B is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #679e8b; --color-2: #f5deb0; --color-3: #380a0e; --color-4: #ff3800; --color-5: #a17a3b. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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