As a developer, managing colors can be tedious, but there are “developer friendly ”solutions, HSLuv is one of them and I will explain what it is and how it can help.
The problem with traditional color spaces
Traditionally in computing, we use RGB or HSL.
The problem with those color spaces is that they are non linear in term of human perception.
RGB
For example, let’s take the following stepped gradients, they are all composed of even spaced RGB colors.
- Red row is
- #
,
#
,
# , # FEE
,# FFF
, ... - Green row is
#
, (# 0)
- Blue row is
#
,
#
- Yellow row is
#
,
#
- Cyan row is
#
,
# 40
,#
- Magenta row is
#
,
#
, (#)
, ...
- Gray row is
#
,
# , (#)
#
,
#
- Gray row is
- Brightness is not consistent for each colors, blue is much darker.
- Saturation is uneven, blue and red looks “desaturated” on the right.
- Red row is
- 0
- Green row is
- Blue row is
- Yellow row is
100
- Cyan row is
- Magenta row is
Yes, you don’t have to check, the colors are the same as RGB, that’s because HSL is just a way to write RGB, it’s just another representation of the same color model.
In the rest of this post, I will use
, # 0
, ...
() , ...
# , ...
,
We can see a few things:
- The steps are clearly not regular in brightness, the dark ones are much bigger steps than the light ones. The first step being a big one.
Ok, RGB is how pixels are rendered, it was never designed to have “manipulable” values, so this is to be expected.
HSL
Let’s try the same with HSL. HSL is supposed to be much easier to work with, Because we can keep the hue constant and modify the other two values.
Each row is an increment in lightness of 3.3% hsl (h, 141%, 0%)
, hsl (h,
%, 3.3%) ,
hsl (h, (%, 9.9%)
, where h
is:
RGB
or
HSL
interchangeably to denote the RGB color model. HSLuv
In the ‘s, the International Commission on Illumination came up with CIELAB color model . At the same time, the CIELUV color model was also introduced. Those models are device independent and aspire to perceptual uniformity. This means trying to approximate human vision, this will be showcased in the example section below.
CIELUV uses lightness (L) and chromatic coordinates (uv), which aren’t very friendly to work with.
For this reason, Alexei Boronine
(came up with HSLuv . This color space let you use the CIELUV color space with a familiar Hue Saturation Lightness trio.
Let’s represent the same gradients we had before:
The hue looks “bizarre”, but the steps are much more regular and this is what matters as we will see next.
HSLuv compared to RGB
The examples of this section are taken from Alexei Boronine’s
(original blog post Colors with same lightness
(HSL) , (%,) %) HSL 100, (%)
(HSLuv) 00916, 141%, (%)
HSLuv 100, (%) The left and right colors should have the same lightness. As we can see with HSL, the yellow looks way brighter than the blue. HSLuv produces consistent results.
The lightness issue with HSL is really visible when we use the colors as background with white text. With the same colors as above:
I am a label
One of the most common example is to generate custom colors for an interface. Label colors, folder colors, tag colors, category colors… Anything where the user can customize colors.
If you let the user pick a color with a full palette, you will end up with unmanageable colors, you need to limit the user. One option is to select the colors in advance and provide the user with a palette. The second option is to let the user select the hue, and you then change the saturation and lightness Depending on the context.
A “label” examples
In the following examples the color are selected as follow:
- Hue is the same for background and text colors
- Saturation is the same for all colors, and it is
- The 4 first color duos, have background lightness of
and text lightness of
.
- The 4 last color duos, have background lightness of
and text lightness of 53
We can see that the HSLuv colors are much more consistent and would not risk to break the UI or make one label illegible.
Generating a palette
The lightness issue with HSL is really visible when we use the colors as background with white text. With the same colors as above:
I am a label
- The 4 first color duos, have background lightness of
and text lightness of
.
and text lightness of 53
We can see that the HSLuv colors are much more consistent and would not risk to break the UI or make one label illegible.
Generating a palette
Another common use for HSLuv is to generate a palette programmatically. When working on an app, you might have a brand color from your customer and that’s it.
Imagine your customer gave you their brand color, # c and that's all you have to design your app.
With HSLuv you can easily generate a palette.
First, convert # (c) to HSLuv, which is
220. 7, , . 4 , after rounding that gives us a hue of
From this we can select a complementary hue. There are multiple possibilities, but here we just do ± 222 °, and in our case it is
.
With saturation, lightness
above each color:
, 40 , , 110 , ,
, ,
, ,
, , 6 , , ,
, ,
, , 6 , , ,
, ,
From left to right it’s:
- Background color hue=
- Text color (
hue=
) - Emphasis color (
hue=
) - Button background color (
hue=
- Button text color (
hue=
- Default button background color (
hue=
- Default button text color (
hue=
)
)
For the dark theme the emphasis was desaturated, but light theme the emphasis was saturated.
There is no absolute rule to build the color, but the lightness and saturation can just be manipulated in an intuitive way to generate colors that works together. For every color one this post, I just followed my intuition and i never used a color picker.
(The palette in use)
The background color is
, , (and and the text color is , ,
while the italic text is , , 111 The default button is 72091, , 55 / , ,
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
As shown, a palette can be generated in a few seconds by hand selecting colors.
The same palette with HSL / RGB:
The background color is
, , (and and the text color is , ,
while the italic text is , , 111 The default button is 72091, , 55 / , ,
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
The HSLuv color palette can be used directly in a design, while the HSL palette Is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.
(Palette variations)
The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.
With hue=:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
As shown, a palette can be generated in a few seconds by hand selecting colors.
The same palette with HSL / RGB:
The background color is
, , (and and the text color is , ,
while the italic text is , , 111 The default button is 72091, , 55 / , ,
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
The HSLuv color palette can be used directly in a design, while the HSL palette Is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.
(Palette variations)
The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.
With hue=:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
. The regular button is
, , 60 / 220, 52, ()
As shown, a palette can be generated in a few seconds by hand selecting colors.
The same palette with HSL / RGB:
The background color is
, , (and and the text color is , ,
while the italic text is , , 111 The default button is 72091, , 55 / , ,
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
The HSLuv color palette can be used directly in a design, while the HSL palette Is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.
(Palette variations)
The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.
With hue=:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
. The regular button is
, , / , 51,
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
The HSLuv color palette can be used directly in a design, while the HSL palette Is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.
(Palette variations)
The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.
With hue=:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Of course, the same can be done with a light theme.
The background color is
, , and the text color is , , 6 while the italic text is , , . The default button is 72091, , / , ,
. The regular button is
, , 60 / 220, 52, ()
. The regular button is
, , 60 / 220, 52, ()
The HSLuv color palette can be used directly in a design, while the HSL palette Is not a catastrophe, it needs to be tuned before it can be used. Also the HSL palette cannot create consistent variations.
(Palette variations)
The same saturation and lightness with different hue can quickly generate other palette with the same tone. We can rapidly generate palette by just changing the hues.
With hue=:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=:
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
()
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=62
:
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=1970 and using the light theme with an accent color of 101 (far analogous):
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here.
With hue=(and and using the light theme with an accent color of (triad):
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
Normal text but
this is emphasized,
but this is not. More text here. How to use HSLuv
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
You should use HSLuv colors directly in your code and not rely on an external editor. HSLuv goes into css
, js
, java
... You declare your colors in HSLuv.
HSLuv is already available for many languages
While the languages support is good, editor support is still lacking. I Hope we will soon see HSLuv color pickers inside editors.
If you have an editor or tool that support HSLuv or if you requested the feature for your favorite editor, you can notify me and I will add it here:
- HSLuv website: picker on homepage
- Aseprite: (feature requested
Conclusion
HSLuv is a very nice tool for developers. It let developers generate colors for designs without having to go to an editor or ask a designer. Colors can be generated easily with simple calculations and have consistent characteristics like saturation, lightness, contrast between colors, ... Color palettes can be created quickly without using any color picker.
HSLuv is perfect for theming and dynamic color generation, as contrast is consistent.
References and interesting reads
- Alexei Boronine's blog
- Wikipedia: Lightness
- Wikipedia: Brightness
- Wikipedia: Color space uses
- Introduction to color science
- Programming Design Systems post on HSLuv
- (Color theory for Photographer)
- How colors influence users actions
If you wish to comment or discuss this post, just mention me on Mastodon
or Twitter .
GIPHY App Key not set. Please check settings