Easy to remember password generator for designers
Here is visual reference ? Easy to remember. Huh?
Try to imagine this text whenever you type your password or make a screenshot ?
On the hunt for the perfect color palette? While there are plenty of color palette generating tools available on the web, there’s nothing quite like curating your very own, unique combination of colors. One way to do this is through color exploration—a creative approach to generating beautiful color palettes that work for a particular project.
A color exploration (sometimes called a color study), is an abstract, visual representation of a set of colors, designed for you to see how each color interacts with one another. It’s a technique many graphic designers like to use for exploring how different color sets work together in various applications.
The good news is, creating a color exploration is fairly simple because there are no hard and fast rules. They can be as simple or as complex as you decide. As you can see in the examples above, every color exploration will look a little different—you can use as many colors as you like, and you can play around with various shapes, textures, and typography to add even more depth.
If you’re not sure where to start when it comes to exploring color, we’ve got you covered. One of our very own Dribbblers Justin Mezzell created a downloadable color exploration template for Adobe Illustrator so you can simply start dropping in your own color schemes! Check it out:
If you’re eager to try your very own color study, here are a handful of beautiful explorations created by graphic designers to inspire you. Use them as inspiration for your next graphic design project, or for your next color study foundation:
Row 1:
Steve Wolf,
C.Rowe,
Skinny Ships.
Row 2:
Rogie for Dribbble,
Sophia Umansky,
Calin Ciobanu.
Row 3:
Jay Higginbotham,
Michelle Lasalvia,
Lorena G.
Row 4:
Cody Paulson,
Mike Casebolt for Mixpanel,
Cory Uehara.
Row 5:
Noah Jacobus,
Mario Šestak,
Cory Uehara.
Find more Inspiration stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.
Choose a file or drag it here.
The tool generates color palettes from images.
Upload an image and the tool does the rest. with the
range slider, you can set up how many colors should
be generated. Click on the button “Load Example
Image” to check out how it works.
Supported formats: png, jpeg, jpg, gif.
There are no definites with color. Sure, you have your red, your green, and so on — but even that is relative. Try to describe a specific red color to a friend. Chances are the description will settle on, for example, is the color more of a brick-red or a fire truck-red?
Describing a color that looks similar to another color is natural way to discuss or express color. But when getting into specifics — accurately defining what it a certain color is — it’s almost impossible. Color, at its core, is a relative and personal experience.
Electromagnetic radiation (EMR) contains radio waves, microwaves, ultraviolet, X-rays, and much more including a subset of what we call “visible light.” These visible light wavelengths contain all the colors that humans can observe without any additional tools. For each color there is a unique light wavelength. When we see color, our eyes are receiving and processing those wavelengths and converting them to colors.
As wavelengths process through the iris of our eyes, rods and cones are receptors of wavelengths. They become activated.
Rods determine brightness, while cones determine the hues of red, yellow or blue. Most people have about 100 million rods and 6 million cones.
Cones are where we perceive color — and in our mental processes we start to interpret what the different types of colors are.
How many colors can the human eye differentiate? Under a good lighting or viewing conditions, people could determine up to 10 million different colors.
While color is relative, there has been a great deal of research and practice into organizing colors. There are several models for how to perceive colors — let’s start with some definitions:
Color is also known as hue. Each hue is a specific spot on the color spectrum. A spectrum can be as simple as a band, or wound up in a color wheel.
To work with color, there are different attributes you should know about:
The range from black to white is called value.
Contrast is the degree of separation between values.
Brightness adds white to an image, the lack of brightness tones the image.
Saturation is the measurement of color intensity. The lack of saturation becomes more like greyscale.
We can mix colors depending on the method or medium we are receiving color. There are two ways: subtractive primaries and additive primaries.
The subtractive colors are cyan, magenta, and yellow—mixing these colors, you get a color that closely resembles black. This is because this method uses reflective colors. The colors are using a physical substance like pigments in paint that reflect the wavelengths to the eyes. Take away these colors or their absence, and you are left with white (or whatever color the canvas is).
This is the primary system used in printing, commonly referred to as CYMK (with the “K” representing black ink, the key). The fourth ink is needed to produce a “true” dark black unlike the muddy black that the colors cyan, yellow, and magenta produce on their own.
The three additive primary colors of red, green, blue were determined in 1861 by Scottish physicist Sir James Clerk Maxwell. When the colors come together in various combinations, they produce other colors — with all three combining to produce white light. This, in short, is how color on your smart device or computer monitor right now is achieved.
Browsers allow us to select the colors we want to use in our designs in different ways from color keywords like (“red”) to hexadecimal (#FF0000). One of the different ways is with the rgb() syntax.
The rgb() syntax is a set of three values representing red, green, and blue — which are the same values as the additive primary colors. Each value is represented as a number that can range in value from 0 to 255. A value of 0 means that the color should not be present. A value of 255, on the other hand, means the full weight of the color should be present and mixed in with the other colors.
For the color red, this is how the CSS looks like:
/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */
.alert {
color: rgb(255, 0, 0);
}
While a light green color would be
/* red = 0 -> 255 */
/* green = 0 -> 255 */
/* blue = 0 -> 255 */
.alert {
color: rgb(128, 255, 128);
}
The HSL model is another digital color system based within the RGB system. But instead of using red, green, and blue as the way to pinpoint a particular color, it goes about defining color through a different method — hue, saturation, and lightness. HSL places the hues in a full circle from 0 to 360 degrees; while percentages — 0% to 100% — are used for saturation and lightness. For example, the following code signifies the color red:
/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */
.alert {
color: hsl(0, 100%, 50%)
}
And a light green color is written out such as:
/* h = hue = 0 -> 360 */
/* s = saturation = 0% -> 100% */
/* l = lightness = 0% -> 100% */
.good {
color: hsl(120, 100%, 75%)
}
One person in twelve has some sort of color deficiency—about 8% of men and 0.4% of women in the U.S. A person with low vision or color blindness will not be able to distinguish text against a background without sufficient contrast.
Also, don’t forget that perceiving color is very much a process that includes the mind. So people might have cognitive issues which could affect their perception of color.
In the Web Content Accessibility Guidelines (WCAG), there are a number of guidelines that address the use of color. They are 1.4.1, 1.4.3, 1.4.6 and 1.4.11:
This guideline talks about using color alone to address or convey meaning. An example is to use color for depicting the bars in a line graph.
In short, we want to make sure we add a design or code treatment that aids in providing the appropriate context to the site visitor.
When providing text to people, we want to ensure that the text can be be perceived. We need to make sure text has enough contrast to come away from the background for legibility.
This success guideline is is similar to 1.4.3 but is more rigorous.
For UI components and graphic objects — such as buttons and icons — we need to provide enough contrast on essential items for navigating a web site.
In WCAG 1.4.3 and 1.4.11, one of the approaches, if you will, for helping to make sure colors are accessible is to make sure there is enough contrast between them. Knowing that there are so many millions of colors and knowing people have issues in viewing colors, what could be a way to calculate the contrast between two colors?
It’s hard to pick a path that would remediate issues for color blindness. So, WCAG uses the relative luminance of the colors to help determine contrast in a (somewhat) simple mathematical formula.
Relative luminance is the value of luminance but expressed as values normalized from a value of 0 for the darkest black to a value of 1 for the lightest white.
The equation to convert RGB values to relative luminance can be found at WCAG:
For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R 0.7152 * G 0.0722 * B
where R, G and B are defined as:
* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB 0.055)/1.055) ^ 2.4
* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB 0.055)/1.055) ^ 2.4
* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB 0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
* RsRGB = R8bit/255
* GsRGB = G8bit/255
* BsRGB = B8bit/255
The “^” character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD].
With a method for determining a color’s relative luminance, it’s therefore possible to compare compare them in what is a called a color contrast ratio.
L1 = Relative luminance of the lighter of the colors
L2 = Relative luminance of the darker of the colors
(L1 0.05) / (L2 0.05)
Now with the ability to determine the contrast ratio between two colors, we can use this formula to then set a standard or indication for what’s poor or good contrast for text and graphics.
And with formulas, it’s easy to create tools and apps to determine color accessibility, such as the Colour Contrast Analyzer (CCA) from The Paciello Group.
If you use DevTools, you can visually check and adjust colors to see if they pass color contrast:
There appear to be hundreds of online color contrast checkers. Here are just a few:
Through research and practice, it’s been found that the algorithm provides false results, as noted by Andrew Somers’ research.
Currently, a new model for detecting contrast is being worked on by the Silver Task Force, which is working on a new version of Accessibility Guidelines as the current contrast ratio is not an ideal algorithm.
Color is amazingly complex. It is both conveyed and perceived in a myriad of ways. While color contrast ratio is a simple aid to determine contrast, it is vital to go beyond just stating basic color contrast ratios when working towards accessible and inclusive designs. We need to convey all of the colors’ complexity in our designs so we can address the visual needs of a variety of people.
Over the last two years we’ve tried to improve our usage of color at Cloudflare. There were a number of forcing functions that made this work a priority. As a small team of designers and engineers we had inherited a bunch of design work that was a mix of values built by multiple teams. As a result it was difficult and unnecessarily time consuming to add new colors when building new components.
We also wanted to improve our accessibility. While we were doing pretty well, we had room for improvement, largely around how we used green. As our UI is increasingly centered around visualizations of large data sets we wanted to push the boundaries of making our analytics as visually accessible as possible.
Cloudflare had also undergone a rebrand around 2016. While our marketing site had rolled out an updated set of visuals, our product ui as well as a number of existing web properties were still using various versions of our old palette.
Our product palette wasn’t well balanced by itself. Many colors had been chosen one or two at a time. You can see how we chose blueberry, ice, and water at a different point in time than marine and thunder.
Lacking visual cohesion within our own product, we definitely weren’t providing a cohesive visual experience between our marketing site and our product. The transition from the nice blues and purples to our green CTAs wasn’t the streamlined experience we wanted to afford our users.
Our first step was to audit what we already had. Cloudflare has been around long enough to have more than one website. Beyond cloudflare.com we have dozens of web properties that are publicly accessible. From our community forums, support docs, blog, status page, to numerous micro-sites.
All-in-all we have dozens of front-end codebases that each represent one more chance to introduce entropy to our visual language. So we were curious to answer the question – what colors were we currently using? Were there consistent patterns we could document for further reuse? Could we build a living style guide that didn’t cover just one site, but all of them?
Our curiosity got the best of us and we went about exploring ways we could visualize our design language across all of our sites.
As we first started to identify the scale of our color problems, we tried to think outside the box on how we might explore the problem space. After an initial brainstorming session we combined the Internet Archive’s Wayback Machine with the Css Stats API to build an audit tool that shows how our various websites visual properties change over time. We can dynamically select which sites we want to compare and scrub through time to see changes.
Below is a visualization of palettes from 9 different websites changing over a period of 6 years. Above the palettes is a component that spits out common colors, across all of these sites. The only two common colors across all properties (appearing for only a brief flash) were #ffffff (white) and transparent. Over time we haven’t been very consistent with ourselves.
If we drill in to look at our marketing site compared to our dashboard app – it looks like the video below. We see a bit more overlap at first and then a significant divergence at the 16 second mark when our product palette grew significantly. At the 22 second mark you can see the marketing palette completely change as a result of the rebrand while our product palette stays the same. As time goes on you can see us becoming more and more inconsistent across the two code bases.
As a product team we had some catching up to do improve our usage of color and to align ourselves with the company brand. The good news was, there was no where to go but up.
This style of historical audit gives us a visual indication with real data. We can visualize for stakeholders how consistent and similar our usage of color is across products and if we are getting better or worse over time. Having this type of feedback loop was invaluable for us – as auditing this manually is incredibly time consuming so it often doesn’t get done. Hopefully in the future as it’s standard to track various performance metrics over time at a company it will be standard to be able to visualize your current levels of design entropy.
After our initial audit revealed there wasn’t a lot of consistency across sites, we went to work to try and construct a color palette that could potentially be used for sites the product team owned. It was time to get our hands dirty and start “picking colors.”
Hindsight of course is always 20/20. We didn’t start out on day one trying to generate scales based on our brand palette. No, our first bright idea, was to generate the entire palette from a single color.
Our logo is made up of two oranges. Both of these seemed like prime candidates to generate a palette from.
We played around with a number of algorithms that took a single color and created a palette. From the initial color we generated an array scales for each hue. Initial attempts found us applying the exact same curves for luminosity to each hue, but as visual perception of hues is so different, this resulted in wildly different contrasts at each step of the scale.
Below are a few of our initial attempts at palette generation. Jeeyoung Jung did a brilliant writeup around designing palettes last year.
We can see the intensity of the colors change across hue in peaks, with yellow and green being the most dominant. One of the downsides of this, is when you are rapidly iterating through theming options, the inconsistent relationships between steps across hues can make it time consuming or impossible to keep visual harmony in your interface.
The video below is another way to visualize this phenomenon. The dividing line in the color picker indicates which part of the palette will be accessible with black and white. Notice how drastically the line changes around green and yellow. And then look back at the charts above.
After fiddling with a few different generative algorithms (we made a lot of ugly palettes…) we decided to try a more manual approach. We pursued creating custom curves for each hue in an effort to keep the contrast scales as optically balanced as possible.
Generating different color palettes makes you confront a basic question. How do you tell if a palette is good? Are some palettes better than others? In an effort to answer this question we constructed various feedback loops to help us evaluate palettes as quickly as possible. We tried a few methods to stress test a palette. At first we attempted to grab the “nearest color” for a bunch of our common UI colors. This wasn’t always helpful as sometimes you actually want the step above or below the closest existing color. But it was helpful to visualize for a few reasons.
Sometime during our exploration in this space, we stumbled across this tweet thread about building a palette for pixel art. There are a lot of places web and product designers can draw inspiration from game designers.
Here we see a similar concept where a number of different palettes are applied to the same component. This view shows us two things, the different ways a single palette can be applied to a sphere, and also the different aesthetics across color palettes.
It’s almost surprising that the default way to construct a color palette for apps and sites isn’t to build it while previewing its application against the most common UI patterns. As designers, there are a lot of consistent uses of color we could have baselines for. Many enterprise apps are centered around white background with blue as the primary color with mixtures of grays to add depth around cards and page sections. Red is often used for destructive actions like deleting some type of record. Gray for secondary actions. Maybe it’s an outline button with the primary color for secondary actions. Either way – the margins between the patterns aren’t that large in the grand scheme of things.
Consider the use case of designing UI while the palette or usage of color hasn’t been established. Given a single palette, you might want to experiment with applying that palette in a variety of ways that will output a wide variety of aesthetics. Alternatively you may need to test out several different palettes. These are two different modes of exploration that can be extremely time consuming to work through . It can be non-trivial to keep an in progress design synced with several different options for color application, even with the best use of layer comps or symbols.
How do we visualize the various ways a palette will look when applied to an interface? Here are examples of how palettes are shown on a palette list for pixel artists.
One method of visualization is to define a common set of primitive ui elements and show each one of them with a single set of colors applied. In isolation this can be helpful. This mode would make it easy to vet a single combination of colors and which ui elements it might be best applied to.
Alternatively we might want to see a composed interface with the closest colors from the palette applied. Consider a set of buttons that includes red, green, blue, and gray button styles. Seeing all of these together can help us visualize the relative nature of these buttons side by side. Given a baseline palette for common UI, we could swap to a new palette and replace each color with the “closest” color. This isn’t always a full-proof solution as there are many edge cases to cover. e.g. what happens when replacing a palette of 134 colors with a palette of 24 colors? Even still, this could allow us to quickly take a stab at automating how existing interfaces would change their appearance given a change to the underlying system. Whether locally or against a live site, this mode of working would allow for designers to view a color in multiple contets to truly asses its quality.
After moving on from the idea of generating a palette from a single color, we attempted to use our logo colors as well as our primary brand colors to drive the construction of modular scales. Our goal was to create a palette that would improve contrast for accessibility, stay true to our visual brand, work predictably for developers, work for data visualizations, and provide the ability to design visually balanced and attractive interfaces. No sweat.
While we knew going in we might not use every step in every hue, we wanted full coverage across the spectrum so that each hue had a consistent optical difference between each step. We also had no idea which steps across which hues we were going to need just yet. As they would just be variables in a theme file it didn’t add any significant code footprint to expose the full generated palette either.
One of the more difficult parts, was deciding on a number of steps for the scales. This would allow us to edit the palette in the future to a variety of aesthetics and swap the palette out at the theme level without needing to update anything else.
In the future if when we did need to augment the available colors, we could edit the entire palette instead of adding a one-off addition as we had found this was a difficult way to work over time. In addition to our primary brand colors we also explored adding scales for yellow / gold, violet, teal as well as a gray scale.
The first interface we built for this work was to output all of the scales vertically, with their contrast scores with both white and black on the right hand side. To aid scannability we bolded the values that were above the 4.5 threshold. As we edited the curves, we could see how the contrast ratios were affected at each step. Below you can see an early starting point before the scales were balanced. Red has 6 accessible combos with white, while yellow only has 1. We initially explored having the gray scale be larger than the others.
As both screen luminosity and ambient light can affect perception of color we developed on two monitors, one set to maximum and one set to minimum brightness levels. We also replicated the color scales with a grayscale filter immediately below to help illustrate visual contrast between steps AND across hues. Bouncing back and forth between the grayscale and saturated version of the scale serves as a great baseline reference. We found that going beyond 10 steps made it difficult to keep enough contrast between each step to keep them distinguishable from one another.
Taking a page from our game design friends – as we were balancing the scales and exploring how many steps we wanted in the scales, we were also stress testing the generated colors against various analytics components from our component library.
Our slightly random collection of grays had been a particular pain point as they appeared muddy in a number of places within our interface. For our new palette we used the slightest hint of blue to keep our grays consistent and just a bit off from being purely neutral.
With a palette consisting of 90 colors, the amount of combinations and permutations that can be applied to data visualizations is vast and can result in a wide variety of aesthetic directions. The same palette applied to both line and bar charts with different data sets can look substantially different, enough that they might not be distinguishable as being the exact same palette. Working with some of our engineering counterparts, we built a pipeline that would put up the same components rendered against different data sets, to simulate the various shapes and sizes the graph elements would appear in. This allowed us to rapidly test the appearance of different palettes. This workflow gave us amazing insights into how a palette would look in our interface. No matter how many hours we spent staring at a palette, we couldn’t get an accurate sense of how the colors would look when composed within an interface.
We experimented with a number of ideas on visualizing different sizes and shapes of colors and how they affected our perception of how much a color was changing element to element. In the first frame it is most difficult to tell the values at 2% and 6% apart given the size and shape of the elements.
We’ve begun to package up some of this work into a web app others can use to create or import a palette and preview multiple depths of accessible combinations against a set of UI elements.
The goal is to make it easier for anyone to work seamlessly with color and build beautiful interfaces with accessible color contrasts.
In an effort to make sure everything we are building will be visually accessible – we built a react component that will preview how a design would look if you were colorblind. The component overlays SVG filters to simulate alternate ways someone can perceive color.
While this is previewing an analytics component, really any component or page can be previewed with this method.
import React from "react"
const filters = [
'achromatopsia',
'protanomaly',
'protanopia',
'deuteranomaly',
'deuteranopia',
'tritanomaly',
'tritanopia',
'achromatomaly',
]
const ColorBlindFilter = ({itemPadding, itemWidth, ...props }) => {
return (
{filters.map((filter, i) => (
{props.children}
))}
)
}
ColorBlindFilter.defaultProps = {
display: 'flex',
justifyContent: 'space-around',
flexWrap: 'wrap',
width: 1,
itemWidth: 1/4
}
export default ColorBlindFilter
We’ve also released a Figma plugin that simulates this visualization for a component.
After quite a few iterations, we had finally come up with a color palette. Each scale was optically aligned with our brand colors. The 5th step in each scale is the closest to the original brand color, but adjusted slightly so it’s accessible with both black and white.
Lyft’s writeup “Re-approaching color” and Jeeyoung Jung’s “Designing Systematic Colors” are some of the best write-ups on how to work with color at scale you can find.
Getting a team of people to agree on a new color palette is a journey in and of itself. By the time you get everyone to consensus it’s tempting to just collapse into a heap and never think about colors ever again. Unfortunately the work doesn’t stop at this point. Now that we’ve picked our palette, it’s time to get it implemented so this bike shed is painted once and for all.
If you are porting an old legacy part of your app to be updated to the new style guide like we were, even the best color documentation can fall short in helping someone make the necessary changes.
We found it was more common than expected that engineers and designers wanted to know what the new version of a color they were familiar with was. During the transition between palettes we had an interface people could input any color and get the closest color within our palette.
There are times when migrating colors, the closest color isn’t actually what you want. Given the scenario where your brand color has changed from blue to purple, you might want to be porting all blues to the closest purple within the palette, not the closest blues which might still exist in your palette. To help visualize migrations as well as get suggestions on how to consolidate values within the old scale, we of course built a little tool. Here we can define those translations and import a color palette from a URL import. As we still have. a number of web properties to update to our palette, this simple tool has continued to prove useful.
We wanted to be as gentle as possible in transitioning to the new palette in usage. While the developers found string names for colors brittle and unpredictable, it was still a more familiar system for some than this new one. We first just added in our new palette to the existing theme for usage moving forward. Then we started to port colors for existing components and pages.
For our colleagues, we wrote out desired translations and offered warnings in the console that a color was deprecated, with a reference to the new theme value to use.
While we had a few bugs along the way, the team was supportive and helped us fix bugs almost as quickly as we could find them.
We’re still in the process of updating our web properties with our new palette, largely prioritizing accessibility first while trying to create a more consistent visual brand as a nice by-product of the work. A small example of this is our system status page. In the first image, the blue links in the header, the green status bar, and the about copy, were all inaccessible against their backgrounds.
A lot of the changes have been subtle. Most notably the green we use in the dashboard is a lot more inline with our brand colors than before. In addition we’ve also been able to add visual balance by not just using straight black text on background colors. Here we added one of the darker steps from the corresponding scale, to give it a bit more visual balance.
While we aren’t perfect yet, we’re making progress towards more visual cohesion across our marketing materials and products.
Trying to keep dozens of sites all using the same palette in a consistent manner across time is a task that you can never complete. It’s an ongoing maintenance problem. Engineers familiar with the color system leave, new engineers join and need to learn how the system works. People still launch sites using a different palette that doesn’t meet accessibility standards. Our work continues to be cut out for us. As they say, a garden doesn’t tend itself.
If we do ever revisit our brand colors, we’re excited to have infrastructure in place to update our apps and several of our satellite sites with significantly less effort than our first time around.
Some of our favorite materials and resources we found while exploring this problem space.
When you’re looking at a jacket, sofa or something else, the first thing you look at is COLOR.
You either attracted to it or it repels you so, think of the color that your brand has.
That’s why, I pay closer attention to color choices when it comes to branding. It matters a lot and has cognitive implications on your customers.
Let’s dive in!
IMPORTANT: The right color palette will evoke the right emotions and build positive associations with your brand!
Below, I’ve listed a few screenshots from the color discovery that is a part of a branding strategy:
In my work, I don’t simply rely on my personal judgement, but rather I prefer to supplement it with a cognitive psychology principles for a maximum impact.
To develop a color palette that supports many design goals, you’ll need to know which colors attract the eye more than others.
Take a look at this ‘Visual salience of colors chart’
Visual salience of colors chart explains how your brand color stacks up against other dominant (salient) colors. It can also help you pick the color tint that will draw more attention to your logo/identity,rather than your competitors.
It’s advised to stick to only 1 primary salient color to avoid a.k.a. ’Las Vegas’ strip design gutter where everything seems important and calling for your attention.
Another important factor to be aware of – Arousal level.
Arousal is the level of physical and cognitive energy experienced. When someone’s arousal is they’ll feel energized, focused, and experience a strong sense of cognitive energy.
In behavioral psychology, high-arousal colors evoke pleasurable emotions to motivate users complete certain actions.
At the end of the discovery, I give my recommendations on the best color variations as well as explaining the strengths and weaknesses of each color option. One of my principles is I never push clients to certain options because I believe that my job as a consultant is to give recommendations and then the company should choose what they feel would fit their needs better. That’s how relationships are built.
If you need help in solidifying your brand as well as establishing a bold visual language, feel free to get in touch.
Thank you for reading!
Till next time.
Alex
RGB to HEX converter to instantly convert RGB color codes to Hexadecimal triplets, see result and copy to clipboard with one click! A RGBA and Hex Color CSS generator that helps you quickly convert and generate RGBA and Hex Color CSS declarations for your website. It comes with many options and it demonstrates instantly. What does this RGB to Hex converter do? It takes input in the form of values for Red, Green and Blue ranging from 0 to 255 and then converts those values to a hexadecimal string that can be used to specify color in HTML5/CSS3 code. Free online RGB color to hexadecimal color converter. Just load your RGB color and it will automatically get converted to a hex color. There are no popups or nonsense, just an awesome decimal RGB to hex converter. Load RGB, get hexadecimal.
The RGB-to-hexadecimal converter algorithm is simple: make sure that your R, G, B (red, green, blue) values are in the range 0…255, convert R, G, B to hex strings, and then concatenate the three hex strings together. Convert RGB to Hex color values here:
RGB Input – it works both for upper and lowercase rgb or rgba codes, but you can ignore the starting rgb mark and the brackets. Make sure you add three numbers in the 0-255 range separated by commas.
HEX Input – the first field accepts values with or without the hash sign. It works for both 3 and 6 character long codes. The calculator can handle some typos too, for example when the second digit of a component is an invalid character, not in the hexadecimal range (0-F).
Setting a basic color theme for your web design project might be an easy task, however, deciding upon the right combinations or coming up with a color scheme may get tricky, especially when you don’t know which color tool would work best for you.
So to help determine the best color schemes for your projects, here are some of the best color tools for webs designers. Let’s check out the list.
Read Also: Open Color – UI-Optimized color scheme for designers
You may know this tool by its previous name Adobe Kuler. It’s one of the most popular features by Adobe allowing you to combine colors.
ColourLovers is an online community of color lovers. It contains images and their color palettes, so you can use them for your own work.
Coolors is a quick color scheme generator. It allows users to create and share color palettes in no time. It chooses the main color of the images and finds perfect color combinations.
Color Snapper 2 is a tool created for OS X Yosemite. It was made for graphic designers so they can play, modify, adjust, organize, save, and export colors on the screen.
Colordot is a great website and iOS app allowing you to create and share color schemes. You can choose color with a finger or a camera.
Adobe Capture CC allows you to take a picture of anything you like and turn it into a color palette, create a brush, and pattern. It’s available on desktop and mobile.
LOL Colors is one of the services created by Mackenzie Child. It’s a website with curated color palettes. Every colorful teardrop is clickable with ready-to-copy hex codes.
Gradients.io lets visitors use gradient fills for their images. The website contains a page full of squares in different color palettes with their hex codes for easier usage.
CheckMyColours helps you combine foreground and background colors of all DOM elements. It’s created to check if the colors pairing create a proper contrast for people with color deficits.
Color Hunter is a useful tool for designers. Just find an image you like and upload it (or enter image URL) to the website. The service will create a color palette from your chosen image.
TinEye allows you to extract color from over 20 million Creative Common images from Flickr. Just select a color, slide dividers to adjust the color and add tags to your search.
Paletton is made to help graphic designers create websites with proper color combinations. You can also use pre-made color palettes in a chosen color.
Colorspire is a 3-steps color palette builder. You can choose a base color, then create a color scheme, and see huge colors preview.
Color Explorer is one of the most in-depth color tools available out there. With its help, you can create, analyze, and customize your color schemes. It’s absolutely free.
0to255 will help you to find darker and lighter shades of one color. It can be used to find a range of shades for one particular color.
ColorRotate is a helpful color editing app for tablets. WIth 3D color scope, you can take a full control of colors of a subject.
SpyColor.com is a free app that provides information about any color, including conversions to many color models, such as RGB, CMYK, HSL, HSV, and much more. You can create various color schemes, for example, complementary, split-complementary, triadic, tetradic, five-tone, clash and more.
Read Also: Find Awesome User-curated Color Palettes with Color Hunt
On this site, you can select up to five hues from a full-page palette. Then, it will generate a display of all the images in its database with this color combination.
ColorMunki lets you create your own colors. You can create color palettes, find similar colors, and properly match them.
This service created for Apple users will help you to explore the world of colors and find new shades. You can discover color harmonies, values, and cross-references.
ColorZilla is Firefox and Google Chrome plugin extension that includes a color picker, eye-dropper, CSS gradient generator and palette browser.
Color Hunt is a new social media channel for color lovers. You can discover carefully picked color palettes, and choose some Hot, Popular or Random color schemes to use in your future designs.
Material UI Colors is an amazing service to choose contrasting colors for material design.
ColorDrop showcases hundreds of amazing color palettes you can use. For easier navigation, use sections “Favourites” and “Flat Colors”.
Colors play a central role in data visualization. But what if your readers are color blind?
According to Color Blind Awareness, color blindness affects 1 in 12 men (8%) and 1 in 200 women (0.5%). There are an estimated 300 million color blind people worldwide, including Mark Zuckerberg, Bill Clinton and Prince William!
Optimizing your graphics can help make them more accessible—and that doesn’t mean banishing color from your charts and graphs either. Contrary to popular belief, more than 99% of color blind people can, in fact, see color—just not in the same way as someone who isn’t impacted by color blindness.
In this guide, we’ll break down the different types of color blindness and their special considerations with respect to data visualization. We’ll also show you how to effectively use color blind friendly palettes to make your graphics available to a wider range of people.
We’ve put together some ready-made color blind friendly palettes to inspire you. Scroll down to the section 4 for that.
First thing’s first…
Color blindness—also known as color vision deficiency (CVD)—is a deficiency in distinguishing between different colors. It occurs when light-sensitive tissue in the back of the eye—the retina–fails to properly respond to variations in wavelengths of light, which enable people to see different colors.
Although color blindness is primarily an inherited condition, it can also result from cataracts or trauma to the eye, as well as a number of diseases, including Parkinson’s, Kallman’s Syndrome and diabetes. Damage to the retina caused by aging can additionally cause color blindness.
There are three distinct types of color blindness:
According to Colblindor, 99% of all color blind people suffer from red/green color blindness. This is further broken down into two distinct categories:
Left: Normal vision, Right: Protanopia
IMAGE SOURCE
The protanopia color spectrum looks like this:
Left: Normal vision, Right: Deuteranopia
IMAGE SOURCE
The deuteranopia color spectrum looks like this:
Red/green color blindness is inherited, and affects males more than females. The reason for this is because the genes responsible for this condition are contained within the X chromosome.
Because women have two X chromosomes, any deficiencies in one will typically be compensated by the other. Men, however, only have one X chromosome, and don’t have a “spare” to fall back on.
People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors.
This particular form of color blindness–also known as Tritanopia–is far less common than its red/green counterpart. In fact, according to the U.S. National Library of Medicine, blue/yellow color blindness affects fewer than 1 in 10,000 people worldwide.
Because Tritanopia isn’t caused by a genetic trait linked to the X chromosome, it is equally present in both men and women.
Left: Normal vision, Right: Tritanopia
IMAGE SOURCE
The Tritanopia color spectrum looks like this:
People who suffer from complete color blindness—also known as Monochromacy—are unable to distinguish between any colors at all. Monochromacy is extremely rare, occurring in 1 in 33,000 people, according to Colour Blind Awareness.
Color plays a significant role in data visualization. For starters, colors are used to highlight important information, as well as illustrate relationships between various types of data. Color also plays an instrumental role in guiding the viewer’s eye. It can even be used to stimulate emotion through color psychology.
You can even argue that the colors used in charts and infographics actually tell the story of the data they represent. As Eva Murray writes in Forbes:
In data visualization, color sets the tone and enforces a message for the underlying visual display. It creates a certain atmosphere and can turn an unassuming visualization into an emotion-filled data story.
WATCH: Everything you need to know about COLOR… in under 3 minutes
Knowing how to pick colors is important, but when you’re optimizing for accessibility, there’s more to consider than color theory and composition.
HOT TIP: Venngage’s Brand Kit feature makes it easy to automatically import your brand colors and brand fonts into your designs.
You can also use Venngage’s color picker tool to easily switch out different colors, a particularly useful tool for working with color blind friendly palettes.
Using a color blind friendly palette doesn’t mean you need to compromise on aesthetics or strip out all the color from your charts. By planning ahead, you can ensure a color blind friendly palette compliments your design, rather than clashes.
Even with a tool like Venngage, which can drastically scale back the number of hours required to create an infographic, it’s still ideal to flesh out your color scheme before you dive in and start a new project.
After all, if it turns out your colors aren’t particularly suited to color blind people—and accessibility is important to you—it’s better to find this out before you’ve invested considerable time and effort in the design.
If you’re not sure where to start, these color blind color wheels can be a useful reference to quickly determine how your colors will translate across different forms of color blindness:
HOT TIP: If you’re stuck, try using a tool like Coblis, a free color blind simulator which will give you a better sense of how your images will appear to people with color blindness.
Another reason you should plan out your color scheme beforehand is so you can avoid using problematic color combinations, some of which can make your charts or infographics completely inaccessible to color blind people.
Color combinations to avoid for people with color blindness include:
If you’re stuck and absolutely must use one of these combinations, try making adjusting the shades so one is extremely dark, and the other extremely light—most color blind people can detect contrast, so this likely will make things easier.
As previously mentioned, contrast isn’t an issue for most people who are color blind. Darken and lighten your colors, respectively, to make the contrast more pronounced. You can also play with different hues, as well as levels of brightness and saturation.
Using patterns and textures in your design is a great way to incorporate visual elements into your design which don’t rely on color.
Venngage’s drag-and-drop design editor features a library of patterns you can use to enhance your design and make it more accessible.
Symbols and icons are a great way to make your designs more accessible because they can visually punctuate a message, without relying on color.
Hot Tip: Venngage’s library includes over 4,000 icons you can use to make your infographics and charts more accessible.
Because color blindness doesn’t impact the ability to distinguish between different shades, consider making your charts monochromatic. Using a restricted color palette will naturally mean there are fewer opportunities to use problematic colors or combinations.
When you’re designing for accessibility, it’s important to keep your infographics as simple and streamlined as possible. Adopting a minimalistic approach will help ensure your presentations are more easily understood, whether or not your audience is color blind.
Optimizing your infographics and charts for people affected by color blindness is important for both accessibility and inclusivity. It’s also possible to do without compromising the aesthetic quality in the process.
The following measures can help ensure color blind people are actually able to engage with your designs:
Combining all these elements will help make your designs more accessible to color blind people. After all, the more people you can engage with, the more impactful your work will be.
6 Ways to Use Infographic Icons Like a Pro
The Do’s And Don’ts of Infographic Color Selection
How to Pick Colors to Captivate Readers and Communicate Effectively
Twenty years ago, the Pantone Color Institute began a tradition that’s become ubiquitous across the paint industry: The Color of the Year. Equal parts trend forecasting and marketing craze, the Color of the Year program elevates a single color to demigod status. The company’s first selection, in 1999, was Cerulean. “Lifestyle movements suggest that consumers will be seeking inner peace and spiritual fulfillment in the new millennium,” the company announced.
Over the past two decades, many other color and paint companies have followed Pantone’s lead, naming a Color of the Year they feel encapsulates not only where the world is, but where it’s going. “We view the Pantone Color of the Year as an educational program that is intended to highlight the relationship between what is taking place in our global culture and how it manifests itself in color,” says Laurie Pressman, VP of the Pantone Color Institute.”With color and context so intertwined, there really are reasons why a color family or individual color comes into prominence when it does, and for the most part the popularity of a color is symbolic of the age we are living in.”
Announcing a color of the year also helps these brands speak directly to consumers, whether they’re people buying paint at Home Depot or designers looking for trend forecasting as they develop new products. The latter is more important than you might imagine, in the $24 billion paint market. In a New York Times piece on color’s significance in culture, Bruce Falconer offers a glimpse at the influence of Pantone’s research. “Color forecasters like Shah and his team at Pantone have tremendous influence over the visible elements of the global economy—the parts of it that are designed, manufactured, and purchased—though their profession itself is all but invisible,” he writes.
Most companies begin researching a couple years in advance, visiting trade shows to see what’s happening in retail and following the lifestyle trends of trusted influencers on social media. But they also depend on intuition and experience to make their forecasts. Pressman says the Pantone team stays “on the lookout for the color we see as ascending, and seems to be building in importance across all areas of design—the one color that is really pushing through, and the single shade we think can communicate the color message that best reflects what is taking place in our culture at this moment in time.” Ideas can emerge from expected places, like fashion and design, but also sources more far afield. “Areas we look to can include the entertainment industry and films in production, traveling art collections and new artists, fashion, all areas of design, popular travel destinations, as well as new lifestyles, play styles, and socio-economic conditions. Influences may also stem from new technologies, materials, textures, and effects that impact color, relevant social media platforms and even upcoming sporting events that capture worldwide attention.”
While Pantone won’t announce its hotly anticipated hue until later this year, paint companies like Behr, Benjamin Moore, and Sherwin Williams have already released their picks for the new decade, along with what they believe those colors reflect about the year ahead. And, perhaps unsurprisingly, they’re all different.
Behr’s selection, a soft and grassy shade of green called “Back to Nature,” is the company’s third official color of the year and was chosen for its association with the great outdoors. Emphasizing the preciousness—and precariousness—of the natural world, it taps into growing concerns about plastic and other sustainability issues, the rise of biophilic design, and the booming indoor plant industry. “It goes back to lifestyle and how we’re living, there’s kind of a social movement to get out there and engage with nature,” Erika Woelfel, Behr VP of Color and Creative Services, says. “We know that people are very aware that getting outside is really important.”
All kinds of green are trending at the moment, especially in the world of home decor. “There’s a huge trend of people bringing plants into their home, which cleans the air and has all these health benefits; that’s why we’re seeing jungle greens and desert greens,” Woelfel explains. ” ‘Back to Nature’ is a sweet spot: it’s not too dark and not too light, it’s fashion-forward in these sense that it’s not too dated, [and it can] create a sanctuary in your home. It really has that indoor, outdoor appeal.”
Benjamin Moore’s 2020 selection, a soft, rosy pink called “First Light,” was selected, in part, because the company’s forecasters kept seeing it pop up in their travels.
“One of our team members saw it during Dutch Design Week,” says Andrea Magno, Benjamin Moore’s director of Color Marketing & Development. “There was a sophistication, it wasn’t overly sweet but the soft, blush color has been around for a number of years and we’ve been tracking it.”
In this sense, paint companies become curators; they seek out popular design aesthetics and distill them for consumers. Annual colors of the year not only provide inspiration for interiors, but also help guide homeowners toward living amongst a fresh palette of colors that may not be in their immediate field of view.
“[First Light] is one of those colors that can live in a lot of different rooms, you can see how it becomes this really beautiful backdrop. It can almost serve as a neutral and give a warm glow to the room,” Magno says. “We thought it was really indicative of fresh thinking. We’re on the dawn of a new decade and we thought: ‘How do we want to embody that?’” While this rosy shade is certainly fresh, it’s not so dissimilar from the ubiquitous whisper of Millennial Pink, a color that has been exhausted to the point of polite mockery. Perhaps First Light’s slightly softer tone will situate it more as a delicate accent color, rather than its dominant and highly branded millennial cousin.
Meanwhile, Sherwin Williams’s 2020 Color of the Year conjures no feelings of a verdant meadow or a fresh morning. The company’s pick, “Naval,” is a rich and brooding navy shade—and is a refreshing departure from the more cheery colors that have dominated the past couple years.
“We knew navy was going to be a big color, [because] we could see black and white and monochromatic was a big trend,” says Sue Wadden, director of color marketing at Sherwin-Williams. “Our 2020 forecast is about taking wellness into the next decade, and [navy] was a great design trend. A really calming, timeless hue that’s always going to look good.”
Naval is Sherwin Williams’s tenth color of the year, and was selected in February during the company’s annual forecast meeting. “We have 12 team members and we all get together and hash this out,” Wadden says. “It’s like a three-day process, and by the end of it one color usually rises to the top.”
While companies are concerned with being on trend, they also need to make selections that are distinct from the colors they celebrated the year prior, which may help explain why these companies don’t often land on similar colors. Ultimately, it comes down to the instincts of each particular team of palette creators. In the case of Wadden and her team at Sherwin-Williams, a deep, bold hue felt right.
These teams of designers and marketers are tasked not only with responding to culture, but attempting to participate in it, too.
Take “Living Coral,” Pantone’s 2019 pick. The company wanted to select a color reflecting critical global trends, and chose a hue that was meant to carry symbolic meaning. “Just as coral reefs provide sustenance and shelter to sea life, vibrant yet mellow Living Coral embraces us with warmth and nourishment to provide comfort and buoyancy in our continually shifting environment,” Pressman says. Some felt the color didn’t place enough emphasis on the environmental issue of coral bleaching, even offering alternatives like a grey “Dead Coral” or all-white “Bleached Coral.”
Color touches nearly every object and industry; far from superficial, it plays an essential role in shaping the world and how we see it. But the public’s interest in color forecasting may also reflect confusion about an ambiguous future, whether in terms of climate change or polarizing politics. A single color that serves to explain the coming year seems like a balm for the confusion.
“There’s been this neutral mania, so it’s exciting to see things ripening . . . I think people are excited to bring color back [into the home], I like the arc we’re on,” Wadden says. “We’re here to inspire, we know what color can do and how it affects mood . . . that’s my goal moving into 2020, is to get people excited about color.”
