Color Picker - Choose Color Online

Select color and convert between HEX, RGB, HSL

Select color

hsl(45, 93%, 47%)

CSS Variables

:root {
 --primary: #EAB308;
 --primary-rgb: 234, 179, 8;
}

Color Picker Online - Professional Free HEX, RGB, HSL Color Picker

Tan Phat Digital's free online color picker tool with intuitive color picker. Instant 2-way conversion between HEX, RGB, HSL. Enter HEX code or RGB value manually, copy each color format with one click. 10 popular color presets available: yellow, green, blue, red, purple, pink, cyan, orange, indigo, black. Automatically generate CSS Variables ready to use in projects. Large, clear color preview. Useful for designers, frontend developers, marketers, and anyone who works with color.

Outstanding features

Intuitive color picker with gradient selector
Instant 2-way conversion HEX ↔ RGB ↔ HSL
Enter the HEX code directly (e.g. #FF5733)
Enter individual RGB values ​​(R: 0-255, G: 0-255, B: 0-255)
Copy each color format with one click
10 popular color presets available for quick selection
Automatically generate copy-paste ready CSS Variables
Large, clear color preview with size 160x160px
HSL display for easy brightness/darkness adjustment
Simple, responsive interface for mobile
Offline processing in browser
Completely free, unlimited

Why is Color Picker needed in design work?

Color is the most important element in web, app, and graphic design - it affects emotions, brand recognition, and user experience. Each platform and tool uses different color formats: CSS often uses HEX (#FF5733), JavaScript and many design tools use RGB (255, 87, 51), and HSL (Hue, Saturation, Lightness) is easier to adjust brightness/darkness. Color Picker helps you quickly convert between formats, ensuring consistent colors across all platforms from Figma to CSS to JavaScript. Especially useful when you need to take colors from a design mockup and implement them in code, or when you need to adjust the color (lighter, darker) while still maintaining the hue.

Benefits when used

  • •Convert colors between formats quickly
  • •Ensure color consistency from design to code
  • •Easily adjust brightness/darkness with HSL
  • •Save time with built-in color presets
  • •CSS Variables are ready to copy-paste into project
  • •No need to install software
  • •Works offline after page load
  • •Free unlimited use

Detailed instructions on how to use Color Picker

  1. 1Drag the color picker bar to visually select the desired color
  2. 2Or click on one of the 10 available color presets
  3. 3Or enter the HEX code directly into the input box (eg #FF5733)
  4. 4Or enter individual R, G, B values ​​(0-255)
  5. 5See all automatically converted color formats
  6. 6See large color preview to evaluate
  7. 7Click the copy icon next to the format to use (HEX, RGB, or HSL)
  8. 8Copy the CSS Variables section to use in the stylesheet

Cooperate immediately with Mavis Digital

We not only design websites, but also help businesses build strong digital brands. Providing comprehensive website design services from design to SEO optimization. Please contact Mavis Digital immediately to create breakthrough, effective and sustainable technology solutions for your business in Ho Chi Minh.

Tools Developer Tools related

.env Generator

Create .envand.env.example file for project.

.gitignore Generator

Generate .gitignore for Node.js, Python, Java.

API Mock Generator

Create mock JSON data for API testing.

API Response Formatter

Format and analyze API response.

API Tester

Test REST API: GET, POST, PUT, DELETE.

Base Converter

Convert Binary, Hex, Base32.

Base64 Encoder

Base64 encoding/decoding.

Binary Converter

Convert Decimal, Binary, Hex.

Box Shadow Generator

Create visual CSS box-shadow.

Chmod Calculator

Calculate Linux file permissions.

Color Contrast

Check WCAG accessibility.

Color Generator

Generate random color palette.