#C1394F + #C2AF2C + #5A963C + #266A55 + #1A3F4F · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#C1394F

Crimson · Brown · Passion Red

HEX

#C1394F

RGB

rgb(193, 57, 79)

HSL

hsl(350, 54%, 49%)

HSB

hsb(350, 70%, 76%)

CMYK

cmyk(0%, 70%, 59%, 24%)

Oklch

oklch(55.1% 0.172 15.7)

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

#C2AF2C

Autumn Sage · GoldenRod · Honey Gold

HEX

#C2AF2C

RGB

rgb(194, 175, 44)

HSL

hsl(52, 63%, 47%)

HSB

hsb(52, 77%, 76%)

CMYK

cmyk(0%, 10%, 77%, 24%)

Oklch

oklch(74.8% 0.143 100.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#5A963C

Celadon · DarkOliveGreen · Olive Green

HEX

#5A963C

RGB

rgb(90, 150, 60)

HSL

hsl(100, 43%, 41%)

HSB

hsb(100, 60%, 59%)

CMYK

cmyk(40%, 0%, 60%, 41%)

Oklch

oklch(61.2% 0.138 136.5)

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

#266A55

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#266A55

RGB

rgb(38, 106, 85)

HSL

hsl(161, 47%, 28%)

HSB

hsb(161, 64%, 42%)

CMYK

cmyk(64%, 0%, 20%, 58%)

Oklch

oklch(47.5% 0.077 169.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1A3F4F

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1A3F4F

RGB

rgb(26, 63, 79)

HSL

hsl(198, 50%, 21%)

HSB

hsb(198, 67%, 31%)

CMYK

cmyk(67%, 20%, 0%, 69%)

Oklch

oklch(34.8% 0.050 229.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1394F

39C0AA

Analogous

C03993

C1394F

C06639

Triadic

C1394F

50C039

3950C0

Split-Comp.

C1394F

39C066

3993C0

Tetradic

C1394F

93C039

39C0AA

6639C0

Contrast Matrix WCAG 2.1 Contrast

C1394F	C2AF2C	5A963C	266A55	1A3F4F
—	2.4 Fail	1.5 Fail	1.2 Fail	2.1 Fail
2.4 Fail	—	1.6 Fail	2.9 Fail	5.1 AA
1.5 Fail	1.6 Fail	—	1.8 Fail	3.1 AA Large
1.2 Fail	2.9 Fail	1.8 Fail	—	1.8 Fail
2.1 Fail	5.1 AA	3.1 AA Large	1.8 Fail	—

White BG

5.3AA

2.2Fail

3.6AA Large

6.4AA

11.2AAA

Black BG

4.0AA Large

9.5AAA

5.9AA

3.3AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

86854A

BABA4C

747552

43445A

2A2A4B

Deuteranopia

8E9848

BBBC53

716C57

403A5B

28254A

Tritanopia

BA4545

C1656A

5D6367

295E5F

1C4847

Achromatopsia

646464

A6A6A6

7A7A7A

535353

363636

Shades & Tints Shades & Tints

#C1394F

Dark

Light

#C2AF2C

Dark

Light

#5A963C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1394f;
  --color-2: #c2af2c;
  --color-3: #5a963c;
  --color-4: #266a55;
  --color-5: #1a3f4f;
}

SCSS

$color-1: #c1394f;
$color-2: #c2af2c;
$color-3: #5a963c;
$color-4: #266a55;
$color-5: #1a3f4f;

TAILWIND

colors: {
  'brand-1': '#c1394f',
  'brand-2': '#c2af2c',
  'brand-3': '#5a963c',
  'brand-4': '#266a55',
  'brand-5': '#1a3f4f',
}

RGB Array

[193, 57, 79], [194, 175, 44], [90, 150, 60], [38, 106, 85], [26, 63, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C1394F, #C2AF2C, #5A963C, #266A55, #1A3F4F 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: #c1394f; --color-2: #c2af2c; --color-3: #5a963c; --color-4: #266a55; --color-5: #1a3f4f. 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 nature-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