🎨 Color Picker

Pick a color and convert formats

Operations

📖 User Guide

Free online color picker - Supporting HEX, RGB, HSL and RGBA format conversion

⚡ Quick Start

Three steps to pick and convert colors:

1
Select Color

Click the color picker to select your desired color

2
View Formats

Below automatically shows HEX, RGB, HSL and other formats

3
Copy Code

Click the "Copy" button next to each format to use

🎨 Color Format Explanation

HEX Format (Hexadecimal)
  • Format: #RRGGBB, such as #FF5733
  • Meaning: R (red) G (green) B (blue), each occupies 2 hexadecimal digits
  • Range: 00-FF (decimal 0-255)
  • Use: Web development, CSS stylesheets
  • Examples:
    • #FFFFFF - White
    • #000000 - Black
    • #FF0000 - Red
RGB Format
  • Format: rgb(R, G, B), such as rgb(255, 87, 51)
  • Meaning: Decimal values of red, green, and blue components
  • Range: 0-255
  • Use: CSS, JavaScript, graphic design
  • Examples:
    • rgb(255, 255, 255) - White
    • rgb(0, 0, 0) - Black
    • rgb(0, 128, 255) - Sky blue
HSL Format
  • Format: hsl(H, S%, L%), such as hsl(9, 100%, 60%)
  • H (Hue): 0-360 degrees (360 degrees returns to red)
  • S (Saturation): 0-100% (0% is gray, 100% most vibrant)
  • L (Lightness): 0-100% (0% black, 50% normal, 100% white)
  • Use: Color adjustment, gradient generation
  • Examples:
    • hsl(0, 0%, 100%) - White
    • hsl(0, 0%, 0%) - Black
    • hsl(120, 100%, 50%) - Pure green
RGBA Format (With Transparency)
  • Format: rgba(R, G, B, A), such as rgba(255, 87, 51, 0.8)
  • A (Alpha): 0-1 (0 fully transparent, 1 fully opaque)
  • Use: Semi-transparent effects, shadows, overlays
  • Examples:
    • rgba(0, 0, 0, 0.5) - Semi-transparent black
    • rgba(255, 255, 255, 0.7) - Semi-transparent white

🔄 Color Operations

Generate Random Color
  • Function: Randomly generate a new color
  • Use: Quickly get inspiration, test color schemes
  • Tip: Click multiple times to find a satisfying color
Invert Color
  • Function: Generate the complementary color (opposite color)
  • Calculation: Each RGB value is subtracted from 255
  • Use: Create high contrast color schemes
  • Example: Red (255,0,0) ↔ Cyan (0,255,255)
Lighten / Darken
  • Lighten: Increase color brightness, move towards white
  • Darken: Decrease color brightness, move towards black
  • Principle: Adjust HSL lightness component
  • Use: Generate color series (such as button hover effects)

❓ Frequently Asked Questions

Q: Are HEX and RGB the same?

A: Essentially the same, just different representations. HEX uses hexadecimal, RGB uses decimal. The tool will automatically convert between them.

Q: When to use HSL and when to use RGB?

A: HSL is more intuitive for adjustment (change lightness just by changing L value); RGB is the industry standard supported by most tools.

Q: How to choose a complementary color?

A: Use the "Invert Color" button to get the complementary color. Complementary colors create maximum contrast.

Q: How to understand transparency in RGBA?

A: 0 is completely transparent (invisible), 0.5 is semi-transparent, 1 is completely opaque. Commonly used for semi-transparent effects.

Q: Can I manually input color codes?

A: Yes, you can paste or edit directly in each input box, formats will auto-convert and update.

🌐 Web Development Application

Using in CSS
  • HEX: background-color: #FF5733;
  • RGB: color: rgb(255, 87, 51);
  • HSL: border-color: hsl(9, 100%, 60%);
  • RGBA: box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
Using in JavaScript
  • document.body.style.backgroundColor = "#FF5733";
  • element.style.color = "rgb(255, 87, 51)";
Using in HTML Attributes
  • <input type="color" value="#FF5733">
  • <svg><rect fill="#FF5733"></rect></svg>

📚 Usage Examples

Web Design

Pick theme colors

Get HEX codes

Apply to CSS

Contrast Check

Pick text color

Invert for background

Check readability

Color Scheme

Pick base color

Lighten/darken for series

Create complete palette

Transparency Effect

Pick color

Get RGBA code

Adjust transparency

💡 Usage Tips

  • Remember common colors: Save frequently used color codes
  • Consider contrast: Think about text readability when picking colors
  • Use color tools: Use lighten/darken to generate coordinated color series
  • HSL for fine-tuning: When adjusting colors, HSL changes are more clear
  • RGBA for overlay effects: Transparency useful for shadows and overlays
  • Completely local: All conversions happen in your browser, no uploads