← Back to Editor

#373A48 · #FA5D5A · #F7F3EC · #C7B597

nature

A 4-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#373A48

Indigo · DarkSlateGray · Prussian Blue

HEX
#373A48
RGB
rgb(55, 58, 72)
HSL
hsl(229, 13%, 25%)
HSB
hsb(229, 24%, 28%)
CMYK
cmyk(24%, 19%, 0%, 72%)
Oklch
oklch(35.1% 0.025 275.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#FA5D5A

Peach Pink · Tomato · Coral Red

HEX
#FA5D5A
RGB
rgb(250, 93, 90)
HSL
hsl(1, 94%, 67%)
HSB
hsb(1, 64%, 98%)
CMYK
cmyk(0%, 63%, 64%, 2%)
Oklch
oklch(68.4% 0.193 24.7)

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

#F7F3EC

Goose Yellow · Linen · Peach Orange

HEX
#F7F3EC
RGB
rgb(247, 243, 236)
HSL
hsl(38, 41%, 95%)
HSB
hsb(38, 4%, 97%)
CMYK
cmyk(0%, 2%, 4%, 3%)
Oklch
oklch(96.5% 0.010 81.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C7B597

Ginger · Tan · Warm Sun

HEX
#C7B597
RGB
rgb(199, 181, 151)
HSL
hsl(38, 30%, 69%)
HSB
hsb(38, 24%, 78%)
CMYK
cmyk(0%, 9%, 24%, 22%)
Oklch
oklch(78.1% 0.046 80.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373A48
484537

Analogous

374348
373A48
3D3748

Triadic

373A48
48373B
3B4837

Split-Comp.

373A48
483D37
434837

Tetradic

373A48
483743
484537
37483D

Contrast Matrix WCAG 2.1 Contrast

373A48
FA5D5A
F7F3EC
C7B597
—
3.6
AA Large
10.2
AAA
5.6
AA
3.6
AA Large
—
2.8
Fail
1.5
Fail
10.2
AAA
2.8
Fail
—
1.8
Fail
5.6
AA
1.5
Fail
1.8
Fail
—
White BG
11.3AAA
3.1AA Large
1.1Fail
2.0Fail
Black BG
1.9Fail
6.8AA
19.0AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383845
B6B55B
F5F5EE
BFBF9E

Deuteranopia

383844
BFCB5B
F6F6EE
C0C2A0

Tritanopia

374241
F25B5B
F7EFEF
C6A4A5

Achromatopsia

3B3B3B
8C8C8C
F3F3F3
B7B7B7

Shades & Tints Shades & Tints

#373A48

Dark
Light

#FA5D5A

Dark
Light

#F7F3EC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373a48;
  --color-2: #fa5d5a;
  --color-3: #f7f3ec;
  --color-4: #c7b597;
}

SCSS

$color-1: #373a48;
$color-2: #fa5d5a;
$color-3: #f7f3ec;
$color-4: #c7b597;

TAILWIND

colors: {
  'brand-1': '#373a48',
  'brand-2': '#fa5d5a',
  'brand-3': '#f7f3ec',
  'brand-4': '#c7b597',
}

RGB Array

[55, 58, 72], [250, 93, 90], [247, 243, 236], [199, 181, 151]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This nature-style palette of #373A48, #FA5D5A, #F7F3EC, #C7B597 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #373a48; --color-2: #fa5d5a; --color-3: #f7f3ec; --color-4: #c7b597. 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 nature-style 4-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