#7B713C + #F7730E + #C42A4E + #21616D + #281B13 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7B713C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#7B713C

RGB

rgb(123, 113, 60)

HSL

hsl(50, 34%, 36%)

HSB

hsb(50, 51%, 48%)

CMYK

cmyk(0%, 8%, 51%, 52%)

Oklch

oklch(54.5% 0.074 98.9)

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

#F7730E

Tangerine · Chocolate · Warm Sun

HEX

#F7730E

RGB

rgb(247, 115, 14)

HSL

hsl(26, 94%, 51%)

HSB

hsb(26, 94%, 97%)

CMYK

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

Oklch

oklch(70.2% 0.186 48.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C42A4E

Vermilion · Crimson · Passion Red

HEX

#C42A4E

RGB

rgb(196, 42, 78)

HSL

hsl(346, 65%, 47%)

HSB

hsb(346, 79%, 77%)

CMYK

cmyk(0%, 79%, 60%, 23%)

Oklch

oklch(54.3% 0.189 13.5)

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

#21616D

Lake Blue · DarkSlateGray · Mint Ice

HEX

#21616D

RGB

rgb(33, 97, 109)

HSL

hsl(189, 54%, 28%)

HSB

hsb(189, 70%, 43%)

CMYK

cmyk(70%, 11%, 0%, 57%)

Oklch

oklch(45.8% 0.066 212.3)

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

#281B13

Tangerine · Black · Cinnamon

HEX

#281B13

RGB

rgb(40, 27, 19)

HSL

hsl(23, 36%, 12%)

HSB

hsb(23, 53%, 16%)

CMYK

cmyk(0%, 33%, 53%, 84%)

Oklch

oklch(23.6% 0.025 52.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B713C

3D477B

Analogous

7B513D

7B713C

667B3D

Triadic

7B713C

3D7B71

713D7B

Split-Comp.

7B713C

3D667B

513D7B

Tetradic

7B713C

3D7B51

3D477B

7B3D66

Contrast Matrix WCAG 2.1 Contrast

7B713C	F7730E	C42A4E	21616D	281B13
—	1.7 Fail	1.1 Fail	1.4 Fail	3.4 AA Large
1.7 Fail	—	2.0 Fail	2.5 Fail	5.9 AA
1.1 Fail	2.0 Fail	—	1.3 Fail	3.0 AA Large
1.4 Fail	2.5 Fail	1.3 Fail	—	2.4 Fail
3.4 AA Large	5.9 AA	3.0 AA Large	2.4 Fail	—

White BG

4.9AA

2.8Fail

5.5AA

7.0AAA

16.7AAA

Black BG

4.3AA Large

7.4AAA

3.8AA Large

3.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

777749

BEBD26

818045

3D3D6A

222215

Deuteranopia

77784C

C6CF2C

8A9643

393469

232415

Tritanopia

7B5355

F03A3E

BC3E3D

246867

271617

Achromatopsia

6E6E6E

8F8F8F

5C5C5C

4F4F4F

1E1E1E

Shades & Tints Shades & Tints

#7B713C

Dark

Light

#F7730E

Dark

Light

#C42A4E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b713c;
  --color-2: #f7730e;
  --color-3: #c42a4e;
  --color-4: #21616d;
  --color-5: #281b13;
}

SCSS

$color-1: #7b713c;
$color-2: #f7730e;
$color-3: #c42a4e;
$color-4: #21616d;
$color-5: #281b13;

TAILWIND

colors: {
  'brand-1': '#7b713c',
  'brand-2': '#f7730e',
  'brand-3': '#c42a4e',
  'brand-4': '#21616d',
  'brand-5': '#281b13',
}

RGB Array

[123, 113, 60], [247, 115, 14], [196, 42, 78], [33, 97, 109], [40, 27, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B713C, #F7730E, #C42A4E, #21616D, #281B13 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: #7b713c; --color-2: #f7730e; --color-3: #c42a4e; --color-4: #21616d; --color-5: #281b13. 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 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