#B3C6AA + #7A9F8D + #FBF0B2 + #E9C675 + #E1A753 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3C6AA

Celadon · Silver · Apple Green

HEX

#B3C6AA

RGB

rgb(179, 198, 170)

HSL

hsl(101, 20%, 72%)

HSB

hsb(101, 14%, 78%)

CMYK

cmyk(10%, 0%, 14%, 22%)

Oklch

oklch(80.4% 0.044 135.5)

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

#7A9F8D

Mineral Blue · LightSlateGray · Olive Green

HEX

#7A9F8D

RGB

rgb(122, 159, 141)

HSL

hsl(151, 16%, 55%)

HSB

hsb(151, 23%, 62%)

CMYK

cmyk(23%, 0%, 11%, 38%)

Oklch

oklch(67.0% 0.049 163.7)

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

#FBF0B2

Fresh Green · Wheat · Lemon Cream

HEX

#FBF0B2

RGB

rgb(251, 240, 178)

HSL

hsl(51, 90%, 84%)

HSB

hsb(51, 29%, 98%)

CMYK

cmyk(0%, 4%, 29%, 2%)

Oklch

oklch(94.9% 0.080 99.2)

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

#E9C675

Ginger · BurlyWood · Sunflower

HEX

#E9C675

RGB

rgb(233, 198, 117)

HSL

hsl(42, 72%, 69%)

HSB

hsb(42, 50%, 91%)

CMYK

cmyk(0%, 15%, 50%, 9%)

Oklch

oklch(84.0% 0.108 86.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E1A753

Ginger · SandyBrown · Warm Sun

HEX

#E1A753

RGB

rgb(225, 167, 83)

HSL

hsl(35, 70%, 60%)

HSB

hsb(35, 63%, 88%)

CMYK

cmyk(0%, 26%, 63%, 12%)

Oklch

oklch(76.7% 0.122 74.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3C6AA

BDA9C6

Analogous

C1C6A9

B3C6AA

A9C6AF

Triadic

B3C6AA

A9B2C6

C6A9B2

Split-Comp.

B3C6AA

AFA9C6

C6A9C1

Tetradic

B3C6AA

A9C1C6

BDA9C6

C6AFA9

Contrast Matrix WCAG 2.1 Contrast

B3C6AA	7A9F8D	FBF0B2	E9C675	E1A753
—	1.6 Fail	1.6 Fail	1.1 Fail	1.2 Fail
1.6 Fail	—	2.5 Fail	1.8 Fail	1.4 Fail
1.6 Fail	2.5 Fail	—	1.4 Fail	1.8 Fail
1.1 Fail	1.8 Fail	1.4 Fail	—	1.3 Fail
1.2 Fail	1.4 Fail	1.8 Fail	1.3 Fail	—

White BG

1.8Fail

2.9Fail

1.2Fail

1.6Fail

2.1Fail

Black BG

11.6AAA

7.2AAA

18.2AAA

12.8AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBB1

8A8A91

F6F6C1

DADA89

C8C767

Deuteranopia

BAB9B2

888592

F7F8C5

DCDF8D

CBD06C

Tritanopia

B4B6B7

7C9596

FACDCF

E7989B

DE777B

Achromatopsia

BDBDBD

929292

ECECEC

C7C7C7

AFAFAF

Shades & Tints Shades & Tints

#B3C6AA

Dark

Light

#7A9F8D

Dark

Light

#FBF0B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3c6aa;
  --color-2: #7a9f8d;
  --color-3: #fbf0b2;
  --color-4: #e9c675;
  --color-5: #e1a753;
}

SCSS

$color-1: #b3c6aa;
$color-2: #7a9f8d;
$color-3: #fbf0b2;
$color-4: #e9c675;
$color-5: #e1a753;

TAILWIND

colors: {
  'brand-1': '#b3c6aa',
  'brand-2': '#7a9f8d',
  'brand-3': '#fbf0b2',
  'brand-4': '#e9c675',
  'brand-5': '#e1a753',
}

RGB Array

[179, 198, 170], [122, 159, 141], [251, 240, 178], [233, 198, 117], [225, 167, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #B3C6AA, #7A9F8D, #FBF0B2, #E9C675, #E1A753 is ideal for: health products, baby brands, fresh-style blogs. 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: #b3c6aa; --color-2: #7a9f8d; --color-3: #fbf0b2; --color-4: #e9c675; --color-5: #e1a753. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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