#997F82 + #C7C28B + #FCF0B6 + #F7DA74 + #82A496 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#997F82

Crimson · Gray · Passion Red

HEX

#997F82

RGB

rgb(153, 127, 130)

HSL

hsl(353, 11%, 55%)

HSB

hsb(353, 17%, 60%)

CMYK

cmyk(0%, 17%, 15%, 40%)

Oklch

oklch(62.2% 0.032 10.2)

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

#C7C28B

Fresh Green · Tan · Sunflower

HEX

#C7C28B

RGB

rgb(199, 194, 139)

HSL

hsl(55, 35%, 66%)

HSB

hsb(55, 30%, 78%)

CMYK

cmyk(0%, 3%, 30%, 22%)

Oklch

oklch(80.5% 0.073 103.5)

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

#FCF0B6

Fresh Green · Bisque · Lemon Cream

HEX

#FCF0B6

RGB

rgb(252, 240, 182)

HSL

hsl(50, 92%, 85%)

HSB

hsb(50, 28%, 99%)

CMYK

cmyk(0%, 5%, 28%, 1%)

Oklch

oklch(95.1% 0.075 97.8)

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

#F7DA74

Goose Yellow · Khaki · Sunflower

HEX

#F7DA74

RGB

rgb(247, 218, 116)

HSL

hsl(47, 89%, 71%)

HSB

hsb(47, 53%, 97%)

CMYK

cmyk(0%, 12%, 53%, 3%)

Oklch

oklch(89.2% 0.126 93.8)

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

#82A496

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#82A496

RGB

rgb(130, 164, 150)

HSL

hsl(155, 16%, 58%)

HSB

hsb(155, 21%, 64%)

CMYK

cmyk(21%, 0%, 9%, 36%)

Oklch

oklch(68.9% 0.043 168.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

997F82

809996

Analogous

99808F

997F82

998980

Triadic

997F82

839980

808399

Split-Comp.

997F82

809989

808F99

Tetradic

997F82

8F9980

809996

898099

Contrast Matrix WCAG 2.1 Contrast

997F82	C7C28B	FCF0B6	F7DA74	82A496
—	2.0 Fail	3.2 AA Large	2.7 Fail	1.3 Fail
2.0 Fail	—	1.6 Fail	1.3 Fail	1.5 Fail
3.2 AA Large	1.6 Fail	—	1.2 Fail	2.4 Fail
2.7 Fail	1.3 Fail	1.2 Fail	—	2.0 Fail
1.3 Fail	1.5 Fail	2.4 Fail	2.0 Fail	—

White BG

3.7AA Large

1.8Fail

1.1Fail

1.4Fail

2.7Fail

Black BG

5.7AA

11.5AAA

18.3AAA

15.2AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E81

C5C598

F7F7C4

EAEA8D

919199

Deuteranopia

8F9181

C5C59C

F8F8C7

ECEE93

8F8C9A

Tritanopia

988181

C7A3A5

FBCFD2

F6A0A4

849C9D

Achromatopsia

878787

BDBDBD

EDEDED

D7D7D7

989898

Shades & Tints Shades & Tints

#997F82

Dark

Light

#C7C28B

Dark

Light

#FCF0B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #997f82;
  --color-2: #c7c28b;
  --color-3: #fcf0b6;
  --color-4: #f7da74;
  --color-5: #82a496;
}

SCSS

$color-1: #997f82;
$color-2: #c7c28b;
$color-3: #fcf0b6;
$color-4: #f7da74;
$color-5: #82a496;

TAILWIND

colors: {
  'brand-1': '#997f82',
  'brand-2': '#c7c28b',
  'brand-3': '#fcf0b6',
  'brand-4': '#f7da74',
  'brand-5': '#82a496',
}

RGB Array

[153, 127, 130], [199, 194, 139], [252, 240, 182], [247, 218, 116], [130, 164, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #997F82, #C7C28B, #FCF0B6, #F7DA74, #82A496 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: #997f82; --color-2: #c7c28b; --color-3: #fcf0b6; --color-4: #f7da74; --color-5: #82a496. 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