Color Picker

What is a Color Picker?

A Color Picker is an online tool that allows you to visually select colors needed for web design, graphic work, and UI/UX development, and convert them to various formats (HEX, RGB, HSL). You can intuitively find the color you want using the color wheel and saturation/lightness selector, and since it supports opacity (Alpha) adjustment, you can also generate RGBA and HSLA format color codes.

This tool runs directly in your browser, so no separate program installation is required. Browsers that support the EyeDropper API (Chrome, Edge) can use the eyedropper feature to extract colors directly from any area of the screen, allowing you to quickly grab colors from design references or images.

When to Use This Tool

• Web Development – Quickly find and copy accurate color codes (HEX, RGB, HSL) to apply to CSS stylesheets
• UI/UX Design – Compose harmonious color palettes for app or website buttons, backgrounds, and text
• Graphic Design – Select and combine colors for posters, banners, and social media images
• Brand Identity – Define brand colors for your company or project and document them in various formats
• Accessibility Testing – Check color values to verify contrast between text and background colors
• Reference Color Extraction – Extract colors directly from websites or images you like using EyeDropper
• Presentation Creation – Find color codes to apply consistent color themes to presentation materials

Key Features

• Color Wheel Selection – Intuitively select the hue you want on a 360-degree color wheel. Browse colors smoothly with mouse drag or touch.
• 2D Saturation/Lightness Selector – Adjust saturation and lightness simultaneously based on the selected hue. Freely choose from bright pastel tones to deep dark colors.
• Alpha (Opacity) Slider – Adjust opacity from 0% to 100% to create semi-transparent colors in RGBA and HSLA formats. Useful for overlays and gradient effects.
• Multiple Color Format Support – Convert and display HEX, RGB, and HSL formats in real-time. Automatically switches to RGBA and HSLA formats when opacity is applied.
• EyeDropper Screen Color Extraction – Click anywhere on the screen in Chrome or Edge browsers to extract colors directly. Can also grab colors from images in other tabs or the desktop.
• Automatic Harmony Color Generation – Automatically generates complementary, analogous, triadic, and monochromatic palettes based on the selected color. Easily find harmonious color combinations based on color theory.
• One-Click CSS Code Copy – Copy the selected color as CSS code in color: #D4AF37; format. Choose from HEX, RGB, or HSL formats.
• Color History Storage – The last 20 selected colors are automatically saved. History is maintained even after closing the browser, allowing you to reuse previously used colors.

How to Use

1. Select Hue – Click or drag on the color wheel to select the basic color area (red, orange, yellow, green, blue, purple, etc.).
2. Adjust Saturation/Lightness – In the square area below, move left/right to adjust saturation and up/down to adjust lightness. The upper right is the most vivid and bright color.
3. Set Opacity – If you need a semi-transparent effect, adjust the Alpha slider. 100% is opaque, 0% is fully transparent.
4. Check and Copy Color Values – Check HEX, RGB, HSL values in the right panel and click the copy button next to each format to copy to clipboard.
5. Use CSS Code – In the CSS code section at the bottom, select your preferred format (HEX/RGB/HSL) and use the “Copy CSS” button to copy code ready to paste into stylesheets.

Understanding Color Theory and Harmony Colors

The Principle of the Color Wheel

The color wheel originated from Isaac Newton’s experiment in 1666, where he used a prism to split light. Modern color wheels are divided into the traditional color wheel (RYB) based on red-yellow-blue, and the digital color wheel (RGB) using red-green-blue. This tool is based on the HSL (Hue-Saturation-Lightness) color model, where hue is expressed as an angle from 0° to 360°.

HSL vs RGB vs HEX

• HEX (Hexadecimal) – The most widely used format on the web. Represents red, green, and blue as 00-FF (0-255) in #RRGGBB format. Example: #D4AF37 is a gold color.
• RGB (Red, Green, Blue) – Based on the three primary colors of light, each channel is represented as a value from 0-255. Used in CSS as rgb(212, 175, 55) format.
• HSL (Hue, Saturation, Lightness) – A model close to human color perception. Consists of hue (0°-360°), saturation (0%-100%), and lightness (0%-100%). Easy to adjust brightness or vividness within the same hue.

Types of Harmony Colors

• Complementary – Two colors positioned opposite each other on the color wheel. Creates strong contrast and is good for catching attention. Example: The complement of blue (240°) is yellow (60°).
• Analogous – Colors adjacent to each other on the color wheel. Commonly found in nature, they give a harmonious and comfortable impression. Example: Orange-yellow-lime green.
• Triadic – Colors at positions that divide the color wheel into thirds. Provides balanced contrast while being softer than complementary. Example: Red-yellow-blue.
• Monochromatic – Colors that vary only in saturation and lightness from a single hue. Gives a clean and sophisticated impression, often used in brand design.

Using Opacity (Alpha)

The Alpha channel adjusts the opacity of a color. 0% is fully transparent, 100% is fully opaque. Semi-transparent colors are frequently used in web design for overlay effects, gradients, and hover states. RGBA and HSLA formats have been supported since CSS3, and HEX codes with transparency (#RRGGBBAA) are supported in modern browsers.

About EyeDropper API

The EyeDropper API is a web API that allows you to extract colors directly from the screen in a browser. This feature is currently supported in Chrome 95+ and Edge 95+. Firefox and Safari do not yet support it.

Using EyeDropper, you can extract colors not only from the current tab but also from other tabs, other applications, and even the desktop. It’s very useful for quickly getting accurate color values from design reference images, competitor websites, and inspiring photos.

Tips for Use

• Document Brand Colors – After selecting your company or project’s main colors, record all HEX, RGB, and HSL values so you can use consistent colors across various environments (web, print, video).
• Consider Accessibility – When selecting text and background colors, make sure there’s sufficient lightness difference. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text.
• Build Color Palettes – After selecting one main color, use the harmony color feature to easily create professional color palettes. Typically composed of 1 main color, 1-2 secondary colors, and 1 accent color.
• Use Semi-Transparent Effects – When placing text over background images, using a semi-transparent overlay (e.g., rgba(0, 0, 0, 0.5)) can improve readability.

Frequently Asked Questions