Color Utilities
d3plus features a set of methods that help manipulate colors to best display your visualizations. These methods may be used outside of the normal constraints of the visualizations to help in dynamic web design.
If you are going to be placing text on a white background, but are worried that the dynamic text color may be too light to read, pass it through this method. .legible() will take a color and darken it until it is dark enough to be read on a white background. Look at this example:
| Make Colored Text Legible on White Backgrounds |
D3plus.org |
|---|---|
| Here is an example page showing how this function behaves with various colors. |
 |
Here, the color that is returned is #0a78c2, because the original color #e6f5ff is almost illegible on a white background.
This method takes a color and lightens it slightly. If the desired output is either too light or too dark for your liking, you can pass an increment (between 0 and 1) as a second variable.
| Lighten Colors | D3plus.org |
|---|---|
| Here is an example page showing how this function behaves with various colors. |
 |
Mixes two hexadecimal colors and returns the new mixed hexadecimal value. Opacity values must be between 0 and 1, and when they are not specified they are set to 1.
Returns a random 6-digit hexidecimal color, as a string, using d3.scale.category20().
When passed a value (either a String or Number), .random() will return a color tied to the specific value.
A sort comparator that sorts color values by hue.
This method will analyze the color passed to it and return either #ffffff or #444444 depending on the color's hue, saturation, and luminosity.
| Legible Text on Colored Backgrounds |
D3plus.org |
|---|---|
| Here is an example page showing how this function behaves with various colors. |
 |
When passed a String value, this method will return true or false depending on if the value is a valid CSS color string.