#9FB354 + #C28B1C + #C74449 + #213739 + #2C221C · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9FB354

Grass Green · DarkSeaGreen · Olive Green

HEX

#9FB354

RGB

rgb(159, 179, 84)

HSL

hsl(73, 38%, 52%)

HSB

hsb(73, 53%, 70%)

CMYK

cmyk(11%, 0%, 53%, 30%)

Oklch

oklch(73.1% 0.123 119.4)

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

#C28B1C

Ochre · DarkGoldenRod · Honey Gold

HEX

#C28B1C

RGB

rgb(194, 139, 28)

HSL

hsl(40, 75%, 44%)

HSB

hsb(40, 86%, 76%)

CMYK

cmyk(0%, 28%, 86%, 24%)

Oklch

oklch(67.4% 0.133 78.7)

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

#C74449

Crimson · Sienna · Passion Red

HEX

#C74449

RGB

rgb(199, 68, 73)

HSL

hsl(358, 54%, 52%)

HSB

hsb(358, 66%, 78%)

CMYK

cmyk(0%, 66%, 63%, 22%)

Oklch

oklch(57.2% 0.167 22.0)

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

#213739

Slate Blue · DarkSlateGray · Peacock Green

HEX

#213739

RGB

rgb(33, 55, 57)

HSL

hsl(185, 27%, 18%)

HSB

hsb(185, 42%, 22%)

CMYK

cmyk(42%, 4%, 0%, 78%)

Oklch

oklch(31.9% 0.028 203.1)

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

#2C221C

Tangerine · Black · Cinnamon

HEX

#2C221C

RGB

rgb(44, 34, 28)

HSL

hsl(23, 22%, 14%)

HSB

hsb(23, 36%, 17%)

CMYK

cmyk(0%, 23%, 36%, 83%)

Oklch

oklch(26.2% 0.019 52.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FB354

6A56B3

Analogous

B39956

9FB354

70B356

Triadic

9FB354

569FB3

B3569F

Split-Comp.

9FB354

5670B3

9956B3

Tetradic

9FB354

56B399

6A56B3

B35670

Contrast Matrix WCAG 2.1 Contrast

9FB354	C28B1C	C74449	213739	2C221C
—	1.3 Fail	2.1 Fail	5.4 AA	6.7 AA
1.3 Fail	—	1.6 Fail	4.2 AA Large	5.2 AA
2.1 Fail	1.6 Fail	—	2.6 Fail	3.2 AA Large
5.4 AA	4.2 AA Large	2.6 Fail	—	1.2 Fail
6.7 AA	5.2 AA	3.2 AA Large	1.2 Fail	—

White BG

2.3Fail

3.0Fail

4.8AA

12.6AAA

15.5AAA

Black BG

9.1AAA

7.0AAA

4.4AA Large

1.7Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A86B

AAAA37

8E8D48

2B2B39

28281D

Deuteranopia

A7A571

ADB13D

96A048

292838

28291E

Tritanopia

A07D81

BF4C51

C04747

223838

2C1F1F

Achromatopsia

A2A2A2

8F8F8F

6C6C6C

313131

242424

Shades & Tints Shades & Tints

#9FB354

Dark

Light

#C28B1C

Dark

Light

#C74449

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fb354;
  --color-2: #c28b1c;
  --color-3: #c74449;
  --color-4: #213739;
  --color-5: #2c221c;
}

SCSS

$color-1: #9fb354;
$color-2: #c28b1c;
$color-3: #c74449;
$color-4: #213739;
$color-5: #2c221c;

TAILWIND

colors: {
  'brand-1': '#9fb354',
  'brand-2': '#c28b1c',
  'brand-3': '#c74449',
  'brand-4': '#213739',
  'brand-5': '#2c221c',
}

RGB Array

[159, 179, 84], [194, 139, 28], [199, 68, 73], [33, 55, 57], [44, 34, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #9FB354, #C28B1C, #C74449, #213739, #2C221C is ideal for: tech websites, dark mode UIs, game UIs. 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: #9fb354; --color-2: #c28b1c; --color-3: #c74449; --color-4: #213739; --color-5: #2c221c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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