Handy tools for finding a color with a desired effect
Table of Contents
1. Converting the hex code of a color to its RGB and vice versa2. Creating a tint of a color (a lighter version of the original color)
3. Creating a shade of a color (a darker version of the original color)
4. Changing the tone of a color
5. Modifying a color’s hue
6. Blending a color to match a target color
7. Finding the complementary color of a color
8. Calculating contrast ratio between two colors
9. Finding contrasting colors for a color at a desired contrast ratio
10. Finding the hex code of a color using the color picker
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
Converting the hex code of a color to its RGB and vice versa
| Hex code | RGB number (R,G,B) |
|---|---|
| , , |
2. Creating a tint of a color (a lighter version of the original color)
Creating a tint of a 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)
Creating a shade of a 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)
Changing the tone of a 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
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
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)
Finding the complementary color of a 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/)
Calculating contrast ratio between two colors
| 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.
Finding contrasting colors for a color at a desired contrast ratio
| 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