Handy tools for finding a color with a desired effect

Explore these handy tools designed to calculate the hexadecimal value 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.

1. Converting the hex code of a color to its RGB and vice versa
Hex codeRGB number (R,G,B)
, ,

2. Creating a tint of a color (a lighter version of the original color)
Original color (hex)Preview
#
Percentage effect *
  %
Resulting color (hex)Preview

* If 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 color (hex)Preview
#
Percentage effect *
  %
Resulting color (hex)Preview

* If 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 color (hex)Preview
#
Percentage effect *
  %
Resulting color (hex)Preview

* If 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 code 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 color (hex)Preview
#
Select the new hue
   
   
   
   

Percentage effect *
  %
Resulting color (hex)Preview

* 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 hex 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 (hex)Preview
#
Target color (hex)Preview
#
Percentage effect *
  %
Resulting color (hex)Preview

* If 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 color (hex)Preview
#
  
Complementary colors
(Method 1)Preview

(Method 2)Preview

Notes: Method 1 simply calculates the hex 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 (hex)Preview
#
Color 2 (hex)Preview
#
Contrast ratio

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 (hex)Preview
#
Desired contrast ratio
  
  
Suggested contrasting colors
Higher luminance

Preview
Lower luminance

Preview

10. Finding the hex code of a color using the color picker

Click on a point on the image (provided or your own) to find the hex code of that color.

Selected Color: None