Color Code Converter

Multi-format color code converter supporting HEX, RGB, HSL and other common color formats

Color Picker

#FF0000

Color Converter

HEX

#FF0000

RGB

rgb(255, 0, 0)

HSL

hsl(0, 100%, 50%)

HSV

hsv(0, 100%, 100%)

CMYK

cmyk(0%, 100%, 100%, 0%)

LAB

lab(53.24, 80.09, 67.2)

Contrast Checker

Foreground

#000000

Background

#ffffff

21:1

Contrast Ratio

Sample Text

示例文本 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA Normal Text:Pass

WCAG AAA Normal Text:Pass

WCAG AA Large:Pass

Color History

No color history

🎨 Quick Colors

Brand Colors

Popular Colors

Quick Actions

Features

✓Support HEX, RGB, HSL, HSV, CMYK, LAB format conversion
✓Visual color picker
✓Smart color palette generation
✓WCAG contrast checking
✓Color history tracking
✓One-click copy all formats

Current Color

#FF0000

Lightness: 50%

Saturation: 100%

Color Theory & Design Guide

Master color science and professional design techniques

Color Theory Fundamentals

Three Elements of Color

Hue

Basic color property, 0-360° on color wheel

Saturation

Color purity, 0-100% intensity

Lightness

Color brightness, 0-100% lightness value

Color Model Comparison

Model	Usage	Features
RGB	Screen display	Light mixing
CMYK	Print output	Ink mixing
HSL	Design tuning	Intuitive control
LAB	Color science	Perceptual uniform

Temperature & Emotion

🔥 Warm Colors

Passionate, energetic

Warm, friendly

Happy, optimistic

❄️ Cool Colors

Fresh, calm

Trustworthy, professional

Natural, harmonious

Color Schemes

Monochromatic

Different shades of the same hue

Analogous

Adjacent colors on the color wheel

Complementary

Opposite colors on the color wheel

Triadic

Three colors equally spaced on the wheel

Design Applications

🌐 Web Design

• Primary color for brand identity
• Accent color for user actions
• Neutral colors for readability
• Contrast for accessibility

📱 Mobile Apps

• Simplified palette to reduce clutter
• Consider various screens and environments
• Follow system color guidelines
• Support dark mode switching

🎨 Brand Design

• Establish consistent color system
• Consider cultural background differences
• Adapt to various media outputs
• Reserve room for color expansion

📊 Data Visualization

• Use perceptually uniform color scales
• Avoid colorblind user confusion
• Distinguish categorical vs numerical data
• Maintain color semantic consistency

Color Psychology

Red

Passionate, urgent, powerful

Uses: Warnings, promotions, food

Orange

Friendly, creative, energetic

Uses: Entertainment, sports, creative

Yellow

Happy, optimistic, attention

Uses: Children, caution, fast food

Green

Natural, safe, growth

Uses: Eco, health, finance

Blue

Trustworthy, professional, calm

Uses: Tech, medical, business

Purple

Mysterious, luxury, creative

Uses: Beauty, arts, premium

Accessibility Guidelines

✅ WCAG Standards

AA 级别： 4.5:1 (normal text)

AAA 级别： 7:1 (high standard)

Large text: 3:1 (18pt+)

🎯 Design Tips

• Don't rely only on color for info
• Provide sufficient color contrast
• Consider colorblind users
• Test under different lighting

🔧 Testing Tools

• Colour Contrast Analyser

• WebAIM Contrast Checker

• Stark (Figma/Sketch)

• Sim Daltonism (Mac)

Best Practices

✅ Recommended Practices

✓Establish systematic color guidelines

✓Use 60-30-10 color rule

✓Maintain brand color consistency

✓Consider print output effects

✓Test on multiple devices

✓Provide dark mode support

❌ Common Mistakes

✗Overusing bright colors

✗Ignoring contrast requirements

✗Inconsistent across platforms

✗Ignoring cultural color meanings

✗Using color alone for critical info

✗Not considering colorblind users

Related Tools

Base64 Encoder Decoder

Online Base64 encoder decoder for text and file conversion

Base64EncodeDecode

Timestamp Converter

Unix timestamp and datetime conversion tool with timezone support

TimestampUnixTime Convert

URL Encoder Decoder

URL encoder decoder with component analysis and batch processing

URLEncodeDecode

Markdown to HTML

Markdown to HTML converter with live preview and multi-format export

MarkdownHTMLConverter

View All Tools