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 #number of a color to its RGB and vice versa
| Hex # number | RGB number (R,G,B) |
|---|---|
| , , |
2. Creating a tint of a color (a lighter version of the original color)
| Original color (hex) | Preview |
|---|---|
| # | |
| Percentage effect * | |
| % | |
| Result color (hex) | Preview |
* If percentage effect is 0%, the result color will be the same as the original color; if it is 100%, the result color will be white.
3. Creating a shade of a color (a darker version of the original color)
| Original color (hex) | Preview |
|---|---|
| # | |
| Percentage effect * | |
| % | |
| Result color (hex) | Preview |
* If percentage effect is 0%, the result color will be the same as the original color; if it is 100%, the result 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 * | |
| % | |
| Result color (hex) | Preview |
* If percentage effect is 0%, the result color will be the same as the original color; if it is 100%, the result 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 color (hex) | Preview | |
|---|---|---|
| # | ||
| Select the new hue | ||
|
| ||
| Percentage effect * | ||
| % | ||
| Result color (hex) | Preview | |
* If the percentage effect is 0%, the result color will be the same as the original color; if the percentage effect is 100%, the result color will be the same as the target hue. For hues other than red, green, blue, or yellow, if you know the hex number 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 * | |
| % | |
| Result color (hex) | Preview |
* If percentage effect is 0%, the result color will be the same as the original color; if it is 100%, the result color will be the same as the target color.
7. Finding 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 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 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 at a desired contrast ratio
| Original color (hex) | Preview | |
|---|---|---|
| # | ||
| Desired contrast ratio | ||
| Suggested contrasting colors | ||
| Higher luminance | ||
| Preview | ||
| Lower luminance | ||
| Preview | ||