← Back to Editor

#6DC2B4 · #3BA6C2 · #827F4D · #9A4800 · #4D242D

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6DC2B4

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#6DC2B4
RGB
rgb(109, 194, 180)
HSL
hsl(170, 41%, 59%)
HSB
hsb(170, 44%, 76%)
CMYK
cmyk(44%, 0%, 7%, 24%)
Oklch
oklch(75.6% 0.086 182.1)

TraditionalMineral Blue」· PaintLake Green」· Creative Blush Sunrise

#3BA6C2

Lake Blue · LightSeaGreen · Mint Ice

HEX
#3BA6C2
RGB
rgb(59, 166, 194)
HSL
hsl(192, 53%, 50%)
HSB
hsb(192, 70%, 76%)
CMYK
cmyk(70%, 14%, 0%, 24%)
Oklch
oklch(67.6% 0.103 218.8)

TraditionalLake Blue」· PaintMint Ice」· Creative Blush Sunrise

#827F4D

Autumn Sage · DimGray · Honey Gold

HEX
#827F4D
RGB
rgb(130, 127, 77)
HSL
hsl(57, 26%, 41%)
HSB
hsb(57, 41%, 51%)
CMYK
cmyk(0%, 2%, 41%, 49%)
Oklch
oklch(58.7% 0.070 105.4)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#9A4800

Tangerine · Sienna · Amber Brown

HEX
#9A4800
RGB
rgb(154, 72, 0)
HSL
hsl(28, 100%, 30%)
HSB
hsb(28, 100%, 60%)
CMYK
cmyk(0%, 53%, 100%, 40%)
Oklch
oklch(49.8% 0.129 51.2)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#4D242D

Crimson · DarkSlateGray · Wine Red

HEX
#4D242D
RGB
rgb(77, 36, 45)
HSL
hsl(347, 36%, 22%)
HSB
hsb(347, 53%, 30%)
CMYK
cmyk(0%, 53%, 42%, 70%)
Oklch
oklch(32.0% 0.062 7.3)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6DC2B4
C16C7A

Analogous

6CC188
6DC2B4
6CA5C1

Triadic

6DC2B4
B36CC1
C1B36C

Split-Comp.

6DC2B4
C16CA5
C1886C

Tetradic

6DC2B4
886CC1
C16C7A
A5C16C

Contrast Matrix WCAG 2.1 Contrast

6DC2B4
3BA6C2
827F4D
9A4800
4D242D
1.4
Fail
2.0
Fail
3.0
AA Large
6.2
AA
1.4
Fail
1.5
Fail
2.2
Fail
4.6
AA
2.0
Fail
1.5
Fail
1.5
Fail
3.2
AA Large
3.0
AA Large
2.2
Fail
1.5
Fail
2.1
Fail
6.2
AA
4.6
AA
3.2
AA Large
2.1
Fail
White BG
2.1Fail
2.8Fail
4.1AA Large
6.4AA
13.1AAA
Black BG
10.0AAA
7.4AAA
5.1AA
3.3AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9293B7
696ABB
818159
767611
3B3B2B

Deuteranopia

8D87B8
635BBA
81815C
7B8116
3E412A

Tritanopia

71BABB
40B6B5
826365
961F22
4B2929

Achromatopsia

A7A7A7
898989
7A7A7A
585858
313131

Shades & Tints Shades & Tints

#6DC2B4

Dark
Light

#3BA6C2

Dark
Light

#827F4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6dc2b4;
  --color-2: #3ba6c2;
  --color-3: #827f4d;
  --color-4: #9a4800;
  --color-5: #4d242d;
}

SCSS

$color-1: #6dc2b4;
$color-2: #3ba6c2;
$color-3: #827f4d;
$color-4: #9a4800;
$color-5: #4d242d;

TAILWIND

colors: {
  'brand-1': '#6dc2b4',
  'brand-2': '#3ba6c2',
  'brand-3': '#827f4d',
  'brand-4': '#9a4800',
  'brand-5': '#4d242d',
}

RGB Array

[109, 194, 180], [59, 166, 194], [130, 127, 77], [154, 72, 0], [77, 36, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #6DC2B4, #3BA6C2, #827F4D, #9A4800, #4D242D is ideal for: corporate websites, product showcases, portfolios. 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: #6dc2b4; --color-2: #3ba6c2; --color-3: #827f4d; --color-4: #9a4800; --color-5: #4d242d. 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. 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 warm-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