← Back to Editor

#9F5A2E · #EE8B2A · #EAE78D · #9EC69C · #642B3D

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9F5A2E

Tangerine · Sienna · Amber Brown

HEX
#9F5A2E
RGB
rgb(159, 90, 46)
HSL
hsl(23, 55%, 40%)
HSB
hsb(23, 71%, 62%)
CMYK
cmyk(0%, 43%, 71%, 38%)
Oklch
oklch(53.9% 0.108 51.1)

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

#EE8B2A

Ginger · GoldenRod · Warm Sun

HEX
#EE8B2A
RGB
rgb(238, 139, 42)
HSL
hsl(30, 85%, 55%)
HSB
hsb(30, 82%, 93%)
CMYK
cmyk(0%, 42%, 82%, 7%)
Oklch
oklch(72.8% 0.158 59.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#EAE78D

Fresh Green · Khaki · Sunflower

HEX
#EAE78D
RGB
rgb(234, 231, 141)
HSL
hsl(58, 69%, 74%)
HSB
hsb(58, 40%, 92%)
CMYK
cmyk(0%, 1%, 40%, 8%)
Oklch
oklch(91.1% 0.112 106.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9EC69C

Celadon · DarkSeaGreen · Apple Green

HEX
#9EC69C
RGB
rgb(158, 198, 156)
HSL
hsl(117, 27%, 69%)
HSB
hsb(117, 21%, 78%)
CMYK
cmyk(20%, 0%, 21%, 22%)
Oklch
oklch(78.6% 0.073 143.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#642B3D

Dark Violet · DarkSlateGray · Camellia

HEX
#642B3D
RGB
rgb(100, 43, 61)
HSL
hsl(341, 40%, 28%)
HSB
hsb(341, 57%, 39%)
CMYK
cmyk(0%, 57%, 39%, 61%)
Oklch
oklch(37.4% 0.085 2.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F5A2E
2E739E

Analogous

9E2E3B
9F5A2E
9E912E

Triadic

9F5A2E
2E9E59
592E9E

Split-Comp.

9F5A2E
2E9E91
2E3B9E

Tetradic

9F5A2E
3B9E2E
2E739E
912E9E

Contrast Matrix WCAG 2.1 Contrast

9F5A2E
EE8B2A
EAE78D
9EC69C
642B3D
—
2.1
Fail
4.1
AA Large
2.8
Fail
2.0
Fail
2.1
Fail
—
2.0
Fail
1.3
Fail
4.3
AA Large
4.1
AA Large
2.0
Fail
—
1.5
Fail
8.3
AAA
2.8
Fail
1.3
Fail
1.5
Fail
—
5.6
AA
2.0
Fail
4.3
AA Large
8.3
AAA
5.6
AA
—
White BG
5.3AA
2.5Fail
1.3Fail
1.9Fail
10.7AAA
Black BG
4.0AA Large
8.4AAA
16.3AAA
11.0AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

818139
C3C241
E9E9A3
AFB0A6
4B4B39

Deuteranopia

858A3B
C9D047
E9E9A8
ADAAA9
4F5338

Tritanopia

9C4143
E95458
EAB4B8
A0AEB0
613534

Achromatopsia

6A6A6A
9E9E9E
DEDEDE
B5B5B5
3E3E3E

Shades & Tints Shades & Tints

#9F5A2E

Dark
Light

#EE8B2A

Dark
Light

#EAE78D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f5a2e;
  --color-2: #ee8b2a;
  --color-3: #eae78d;
  --color-4: #9ec69c;
  --color-5: #642b3d;
}

SCSS

$color-1: #9f5a2e;
$color-2: #ee8b2a;
$color-3: #eae78d;
$color-4: #9ec69c;
$color-5: #642b3d;

TAILWIND

colors: {
  'brand-1': '#9f5a2e',
  'brand-2': '#ee8b2a',
  'brand-3': '#eae78d',
  'brand-4': '#9ec69c',
  'brand-5': '#642b3d',
}

RGB Array

[159, 90, 46], [238, 139, 42], [234, 231, 141], [158, 198, 156], [100, 43, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #9F5A2E, #EE8B2A, #EAE78D, #9EC69C, #642B3D 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: #9f5a2e; --color-2: #ee8b2a; --color-3: #eae78d; --color-4: #9ec69c; --color-5: #642b3d. 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