Handy tools for finding a color with a desired effect
Table of Contents
Color picker1. Converting the hex code of a color to its RGB and vice versa
2. 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. Changing the transparency of a color
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
Color Picker: click on a color on the image (provided or your own) to find the color code of that color.
Selected Color: None
1. Converting the hex code of a color to its rgb value and vice versa
Converting a color’s hex code to its rgb value and vice versa
| Hex code | rgb code |
|---|---|
2. Creating a tint of a color (a lighter version of the original color)
Creating a tint of a color
| Original 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 white.
3. Creating a shade of a color (a darker version of the original color)
Creating a shade of a color
| Original 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 black.
4. Changing the tone of a color (a less vibrant version of the original color)
Changing the tone of a color
| Original 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 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
Modifying a color’s hue
| Original color | Preview |
|---|---|
| # 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
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)
Finding the complementary color of a color
| Your color | Preview |
|---|---|
| # 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/)
Calculating contrast ratio between two colors
| 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.
Finding contrasting colors for a color at a desired contrast ratio
| 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
Changing the transparency of a color
| Original color | Preview |
|---|---|
| # 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.