← Back to Editor

#67A3A9 · #FBE1B6 · #B68A14 · #625B42 · #433733

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#67A3A9

Slate Blue · CadetBlue · Lake Green

HEX
#67A3A9
RGB
rgb(103, 163, 169)
HSL
hsl(185, 28%, 53%)
HSB
hsb(185, 39%, 66%)
CMYK
cmyk(39%, 4%, 0%, 34%)
Oklch
oklch(67.7% 0.063 203.9)

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

#FBE1B6

Goose Yellow · Wheat · Peach Orange

HEX
#FBE1B6
RGB
rgb(251, 225, 182)
HSL
hsl(37, 90%, 85%)
HSB
hsb(37, 27%, 98%)
CMYK
cmyk(0%, 10%, 27%, 2%)
Oklch
oklch(92.1% 0.063 80.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B68A14

Ochre · DarkGoldenRod · Honey Gold

HEX
#B68A14
RGB
rgb(182, 138, 20)
HSL
hsl(44, 80%, 40%)
HSB
hsb(44, 89%, 71%)
CMYK
cmyk(0%, 24%, 89%, 29%)
Oklch
oklch(65.8% 0.130 84.9)

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

#625B42

Ochre · DarkOliveGreen · Honey Gold

HEX
#625B42
RGB
rgb(98, 91, 66)
HSL
hsl(47, 20%, 32%)
HSB
hsb(47, 33%, 38%)
CMYK
cmyk(0%, 7%, 33%, 62%)
Oklch
oklch(47.1% 0.039 94.3)

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

#433733

Tangerine · DarkSlateGray · Cinnamon

HEX
#433733
RGB
rgb(67, 55, 51)
HSL
hsl(15, 14%, 23%)
HSB
hsb(15, 24%, 26%)
CMYK
cmyk(0%, 18%, 24%, 74%)
Oklch
oklch(34.8% 0.019 39.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67A3A9
A96B66

Analogous

66A98D
67A3A9
6682A9

Triadic

67A3A9
A966A3
A3A966

Split-Comp.

67A3A9
A96682
A98D66

Tetradic

67A3A9
8D66A9
A96B66
82A966

Contrast Matrix WCAG 2.1 Contrast

67A3A9
FBE1B6
B68A14
625B42
433733
—
2.2
Fail
1.1
Fail
2.4
Fail
4.0
AA Large
2.2
Fail
—
2.5
Fail
5.3
AA
9.0
AAA
1.1
Fail
2.5
Fail
—
2.1
Fail
3.6
AA Large
2.4
Fail
5.3
AA
2.1
Fail
—
1.7
Fail
4.0
AA Large
9.0
AAA
3.6
AA Large
1.7
Fail
—
White BG
2.8Fail
1.3Fail
3.2AA Large
6.8AA
11.5AAA
Black BG
7.4AAA
16.5AAA
6.6AA
3.1AA Large
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8182A8
F0F0C0
A3A331
5F5F48
3E3E34

Deuteranopia

7E79A7
F1F3C3
A6A937
5F604A
3F3F34

Tritanopia

6AA6A6
FAC9CA
B4474C
624D4E
423535

Achromatopsia

929292
E4E4E4
8A8A8A
5A5A5A
3A3A3A

Shades & Tints Shades & Tints

#67A3A9

Dark
Light

#FBE1B6

Dark
Light

#B68A14

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67a3a9;
  --color-2: #fbe1b6;
  --color-3: #b68a14;
  --color-4: #625b42;
  --color-5: #433733;
}

SCSS

$color-1: #67a3a9;
$color-2: #fbe1b6;
$color-3: #b68a14;
$color-4: #625b42;
$color-5: #433733;

TAILWIND

colors: {
  'brand-1': '#67a3a9',
  'brand-2': '#fbe1b6',
  'brand-3': '#b68a14',
  'brand-4': '#625b42',
  'brand-5': '#433733',
}

RGB Array

[103, 163, 169], [251, 225, 182], [182, 138, 20], [98, 91, 66], [67, 55, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #67A3A9, #FBE1B6, #B68A14, #625B42, #433733 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #67a3a9; --color-2: #fbe1b6; --color-3: #b68a14; --color-4: #625b42; --color-5: #433733. 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 summer-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