Online Color Picker
Tool Introduction:
Click on your desired color in the color picker/palette below, and the tool will instantly display the hexadecimal color code and show corresponding color conversion values in RGB, CMYK, LAB, HSL, XYZ, LUV, HWB formats. You can click the up and down buttons in the palette to switch between HEX, RGB, and HSL, and modify their values. Drag the HUE bar to adjust the hue. Below, you can see color variations, generating shade values of your selected color by adding pure white or pure black in 10% increments. This tool also displays color combinations, including complementary, split-complementary, triadic, analogous, monochromatic, and tetradic color schemes. Additionally, there is a color contrast checker; click "Click to Fix" to adjust text and background colors for optimal contrast.
Color Picker
Color Value
Color Shades
Color shades show the mixing effect of your selected color with white and black. The upper section displays the color mixed with different proportions of white (getting lighter), while the lower section shows mixing with different proportions of black (getting darker). Each color block displays its hexadecimal code, click to copy.
Color Combinations
Color combinations show other colors that pair well with your selected color. These combinations are based on color theory and can be used for designing color schemes. Click any color to copy its hexadecimal code.
Complementary
Complementary colors are located opposite each other on the color wheel, 180° apart. This combination creates strong contrast and is vibrant.
Split Complementary
Choose a base color, then select colors on either side of its complement (usually 30° apart). This combination provides high contrast but is more harmonious than direct complementary colors.
Triadic
Select three colors that are equidistant (120° apart) on the color wheel. This combination is balanced and vibrant, but requires attention to proportion when used.
Analogous
Select colors adjacent to each other on the color wheel (usually 30° apart). This combination is harmonious and natural, suitable for creating comfortable designs.
Monochromatic
Use colors with the same hue but different brightness and saturation. This combination is clean and harmonious, suitable for minimalist designs.
Tetradic
Select four colors equidistant on the color wheel (usually forming a rectangle or square). This combination is rich and colorful, but should be used carefully to avoid being overly complex.
Color Contrast Checker
The contrast checker is used to evaluate the readability of text color against background color. Good contrast is crucial for improving content accessibility, especially for users with visual impairments. WCAG standards require: AA level needs at least 4.5:1 contrast ratio, AAA level needs at least 7:1 contrast ratio.
Aa Preview Text Sample Text
1234567890