← Back to Editor

#63543E · #F3B3A7 · #8F8770 · #E6F8BA · #F1F6EA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#63543E

Ochre · DarkOliveGreen · Amber Brown

HEX
#63543E
RGB
rgb(99, 84, 62)
HSL
hsl(36, 23%, 32%)
HSB
hsb(36, 37%, 39%)
CMYK
cmyk(0%, 15%, 37%, 61%)
Oklch
oklch(45.5% 0.039 77.0)

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

#F3B3A7

Peach Pink · LightPink · Coral Red

HEX
#F3B3A7
RGB
rgb(243, 179, 167)
HSL
hsl(9, 76%, 80%)
HSB
hsb(9, 31%, 95%)
CMYK
cmyk(0%, 26%, 31%, 5%)
Oklch
oklch(82.3% 0.077 30.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#8F8770

Ochre · Gray · Honey Gold

HEX
#8F8770
RGB
rgb(143, 135, 112)
HSL
hsl(45, 12%, 50%)
HSB
hsb(45, 22%, 56%)
CMYK
cmyk(0%, 6%, 22%, 44%)
Oklch
oklch(62.4% 0.035 91.1)

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

#E6F8BA

Willow Green · Wheat · Mint Green

HEX
#E6F8BA
RGB
rgb(230, 248, 186)
HSL
hsl(77, 82%, 85%)
HSB
hsb(77, 25%, 97%)
CMYK
cmyk(7%, 0%, 25%, 3%)
Oklch
oklch(95.1% 0.082 121.1)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#F1F6EA

Willow Green · Linen · Mint Green

HEX
#F1F6EA
RGB
rgb(241, 246, 234)
HSL
hsl(85, 40%, 94%)
HSB
hsb(85, 5%, 96%)
CMYK
cmyk(2%, 0%, 5%, 4%)
Oklch
oklch(96.6% 0.017 125.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63543E
3F4E64

Analogous

64433F
63543E
61643F

Triadic

63543E
3F6455
553F64

Split-Comp.

63543E
3F6164
433F64

Tetradic

63543E
3F6443
3F4E64
643F61

Contrast Matrix WCAG 2.1 Contrast

63543E
F3B3A7
8F8770
E6F8BA
F1F6EA
—
4.1
AA Large
2.0
Fail
6.5
AA
6.7
AA
4.1
AA Large
—
2.0
Fail
1.6
Fail
1.6
Fail
2.0
Fail
2.0
Fail
—
3.2
AA Large
3.3
AA Large
6.5
AA
1.6
Fail
3.2
AA Large
—
1.0
Fail
6.7
AA
1.6
Fail
3.3
AA Large
1.0
Fail
—
White BG
7.3AAA
1.8Fail
3.6AA Large
1.1Fail
1.1Fail
Black BG
2.9Fail
11.8AAA
5.9AA
18.5AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5C43
D7D7AA
8C8B76
EEEEC9
F3F3ED

Deuteranopia

5D5F45
DBE0AB
8C8D77
EDEBCD
F3F3EE

Tritanopia

624848
F0ACAD
8F7A7B
E7D5D7
F1EFF0

Achromatopsia

565656
C5C5C5
878787
ECECEC
F3F3F3

Shades & Tints Shades & Tints

#63543E

Dark
Light

#F3B3A7

Dark
Light

#8F8770

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63543e;
  --color-2: #f3b3a7;
  --color-3: #8f8770;
  --color-4: #e6f8ba;
  --color-5: #f1f6ea;
}

SCSS

$color-1: #63543e;
$color-2: #f3b3a7;
$color-3: #8f8770;
$color-4: #e6f8ba;
$color-5: #f1f6ea;

TAILWIND

colors: {
  'brand-1': '#63543e',
  'brand-2': '#f3b3a7',
  'brand-3': '#8f8770',
  'brand-4': '#e6f8ba',
  'brand-5': '#f1f6ea',
}

RGB Array

[99, 84, 62], [243, 179, 167], [143, 135, 112], [230, 248, 186], [241, 246, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63543E, #F3B3A7, #8F8770, #E6F8BA, #F1F6EA is ideal for: health products, baby brands, fresh-style blogs, 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: #63543e; --color-2: #f3b3a7; --color-3: #8f8770; --color-4: #e6f8ba; --color-5: #f1f6ea. 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. 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 general-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