Handy tools for finding a color with a desired effect

Explore these handy tools designed to calculate the hexadecimal (hex) and the rgb values of a color based on another color of your choice. These tools offer precise control over the intensity and effect you desire for your new color.

Color Picker

Selected Color: None

1. Converting the hex code of a color to its rgb value and vice versa
Hex codergb code

2. Creating a tint of a color (a lighter version of the original color)
Original colorPreview

or
Percentage effect *
Resulting color: Preview

Hex:

rgb:

* If the percentage effect is 0%, the resulting color will be the same as the original color; if it is 100%, the resulting color will be white.

3. Creating a shade of a color (a darker version of the original color)
Original colorPreview
#
or
Percentage effect *
Resulting color: Preview

Hex:

rgb:

* If the percentage effect is 0%, the resulting color will be the same as the original color; if it is 100%, the resulting color will be black.

4. Changing the tone of a color (a less vibrant version of the original color)
Original colorPreview
#
or
Percentage effect *
Resulting color Preview

Hex:

rgb:

* If the percentage effect is 0%, the resulting color will be the same as the original color; if it is 100%, the resulting color will be the standard grey #808080. Since there are many shades of grey, if a different shade of grey is preferred, and if its hex number is known, then tool 6 can be used instead, with the preferred grey to be the target color.

5. Modifying a color’s hue
Original colorPreview
#
or
Select the new hue
   
   
   
   

Percentage effect *
Resulting color Preview

Hex:

rgb:

* If the percentage effect is 0%, the resulting color will be the same as the original color; if the percentage effect is 100%, the resulting color will be the same as the target hue. For hues other than red, green, blue, or yellow, if you know the color code of that hue, tool 6 can be used instead, with the new hue as the target color.

6. Blending a color to match a target color
Original color Preview
#
or
Target color Preview
#
or
Percentage effect *
Resulting color Preview

Hex:

rgb:

* If the percentage effect is 0%, the resulting color will be the same as the original color; if it is 100%, the resulting color will be the same as the target color.

7. Finding the complementary color of a color

A complementary color is defined as one of a pair of colors that are opposite each other on the traditional color wheel. When complementary pairs are placed close together, mutual enhancement of color intensity results. (https://www.britannica.com/science/complementary-color)

Your colorPreview
#
or
Complementary color (Method 1)Preview

Hex:

rgb:

Complementary color (Method 2)Preview

Hex:

rgb:

* Method 1 simply calculates the color code of the color located at the opposite position on the color wheel. Method 2 incorporates the saturation and lightness of the color into the calculations.

8. Calculating contrast ratio between two colors

Contrast ratio between the background and foreground are useful in web designing. The Web Content Accessibility Guidelines (WCAG) 2.1 recommends a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text to ensure that text content is legible and readable for most users, including those with visual impairments. For normal text, the minimum recommended font size is 16px (or 1em), which corresponds to approximately 12 points when printed. For large text, WCAG 2.1 recommends a minimum font size of 18.66px (or 1.2em) for normal viewing and 24px (or 1.5em) for enhanced readability. (https://www.w3.org/TR/WCAG21/)

Color 1 Preview
#
or
Color 2 Preview
#
or
Contrast ratio:

Contrast ratio between the background and foreground are useful in web designing. The Web Content Accessibility Guidelines (WCAG) 2.1 recommends a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text to ensure that text content is legible and readable for most users, including those with visual impairments. For normal text, the minimum recommended font size is 16px (or 1em), which corresponds to approximately 12 points when printed. For large text, WCAG 2.1 recommends a minimum font size of 18.66px (or 1.2em) for normal viewing and 24px (or 1.5em) for enhanced readability. (https://www.w3.org/TR/WCAG21/)

9. Finding contrasting colors for a color at a desired contrast ratio

For a specific color, various colors can be created to achieve a desired contrast ratio, incorporating effects like transparency or lightness. For this calculation tool, it simply generates a set of up to six colors, each dominated by one of the three primary hues: red, green, and blue. If no contrasting colors are identified for a given contrast ratio, consider adjusting the ratio value either downwards or upwards.

Original color Preview
#
or
Desired contrast ratio
Suggested contrasting colors
Higher luminance

Hex:

rgb:

Hex:

rgb:

Hex:

rgb:

Lower luminance

Hex:

rgb:

Hex:

rgb:

Hex:

rgb:

For a specific color, various colors can be created to achieve a desired contrast ratio, incorporating effects like transparency or lightness. For this calculation tool, it simply generates a set of up to six colors, each dominated by one of the three primary hues: red, green, and blue. If no contrasting colors are identified for a given contrast ratio, consider adjusting the ratio value either downwards or upwards.

10. Changing the transparency of a color
Original colorPreview
#
or
Percentage effect *
Percentage effect *
Resulting color Preview

Hex:

rgba:

* If the percentage effect is 0%, the resulting color will be completely transparent; if it is 100%, the resulting color will be completely opaque.