Note that the headline gets this wrong but the page linked to gets this right.
sRGB or Rec2020 or ACEScg etc. are color spaces with known primaries and a known whitepoint. This is not nit-picky. Almost everyone doing CGI for the first time w/o reading up on some theory beforehand gets this wrong (because of gamma and then premultiplication, usually in that order).
Then there are color models which are also color spaces. CIE XYZ is an example.
While you are right, sometimes "RGB" is used as an abbreviation for some color space that is understood from the context, e.g. the CIE 1931 RGB color space (from which the CIE XYZ color space has been derived) or the RGB decoded correspondent of some TV color space, e.g. NTSC, PAL or SECAM.
Most of my career was somehow related to graphics programming and I always thought it's bit weird that most quantization algorithms were operating in RGB model despite the fact that it was designed for hardware, not so for faithful color manipulation.
The easiest way to see that is to imagine a gradient between two colors and trying to make it in RGB. It doesn't seem right most of the time.
If so, then why would we consider distance in 3D space between two colors as faithful representation of their likeness?
Well, lo and behold, it's 2025 and everyone finally accepting LAB as the new standard. :)
> It's definitely not something you can plug into a three-value model.
What do you mean? And what is screwed up? We use 3 dimensions because most of us are trichromats, and because (un-coincidentally) most digital display devices have 3 primaries. The three-value models definitely are sufficient for many color tasks & goals. Three-value models work so well that outside of science and graphics research it’s hard to find good reasons to need more, especially for art & design work. It’d be more interesting to identify cases where a 3d color model or color space doesn’t work… what cases are you thinking of? 3D cone response is neither physical (spectral) color nor perceptual (“brain”) color, and it lands much closer to the physically-based side of things, but completely physically justifies using 3D models without needing to understand the brain or perception, does it not?
I had experimented with some photo printing services and came across one professional level service that offered pigment inkjet printing (vs much more common dye inkjet printing). Their printers had 12 colors of ink vs the traditional 4. I did some test photos and visually they looked stunning.
fun fact: there's a guy with similar background to mine, with similar dedication to color, yet way more productive and he came out with this incredible piece of art: rebelle app
As with most recent technological breakthroughs it uses math from 1931 paper to magically blend colors in ways that seems so realistic it's almost uncanny.
Is this why there appears to be a quite distinct plane inside the cube? If we were looking at them in the colour space would it look more uniformly spread?
I originally made this about 8 years ago just for myself: to see where the color name list I maintain had gaps: https://github.com/meodai/color-names
As I learned more about color models, I kept adding different ones over time. The perceptual models helped me understand the “missing” areas much better.
Wish there was a way to make it stop spinning, it's practically impossible to figure out adjacent colors because everything keeps moving no matter what you do. Perhaps there is a way, but I didn't find it?
I like sharing descriptive names with designers instead of naming everything "light blue" "dark blue" "not quite as light but still not dark blue" etc.
This new thing is tons of fun but seems a bit less practically useful.
I am curious why in your example you compare indigo to violet and purple since purple has a major red component while indigo and violet are on the complete opposite end of the visible color spectrum and are single wavelength colors.
Very clearly shows much more sensitive our eyes are to luminance rather than hue or saturation, which was the main observation that allowed for the high compression rate of JPEG
Are you speaking of chroma subsampling, or is there a property of the discrete cosine transform that makes it more effective on luma rather than chroma?
Probably chroma subsampling - storing color at lower resolution than luminance to take advantage of the aforementioned sensitivity difference. Since it’s stored at 1/4 resolution it can alone almost halve the file size.
Saying it’s the insight that led to JPEG seems wrong though, as DCT + quantization was (don’t quote me on this) the main technical breakthrough?
Is the initial setting (Color Name List) a list of ALL the colors in each "sub" category listed in the drop menu?
If so, would it be possible to put a "namespace" in front (like html.violet, or html::violet). That way you see which source it's from? That way you know where it's from (though I realize this may cause multiple "hits" on the same value/name) Or perhaps same names have different values.
Either way, pretty cool. I agree, it would be nice to have a button or mode to stop spinning without having to hack it manually.
Great project! It's visually dazzling and it really drives home the sheer size of the universe(s) of named colors.
I've long been interested in the names of colors and their associations. If I may plug my own site a bit, check out the "color thesaurus" feature on OneLook that organizes color names more linearly. Start with mauve, as an example: https://onelook.com/?w=mauve&colors=1
(It also lets you see the words evoked by the color and vice versa, which was a fun LLM-driven analysis.)
I am the creator of the 3d thing that was shared. I am very interested in collaborating on something. Is the data you used for it accessible somewhere?
X11 color names are atrociously bad. Inconsistent prefixes and suffixes, flatly wrong names for many handfuls of RGB triplets, and it’s what got hard wired into CSS and HTML.
Could be just plain alphabetical. There's a selector for which color name list to use/examine on the bottom of the visualization. There's also a selector for which color space model to use.
What coordinate in the space is furthest from any named color? It looks like there are some relatively large voids in the blue/purple boundary area but it’s hard to say.
perceptual distance is quite different from Euclidean distance in this RGB space. Like if put two swaths of color side by side and said “how similar are these?” to samples of people, the groupings would not much resemble this cube.
They’ve done this! It’s shown on a “chromaticity diagram”, and is useful for comparing what colors different screens/printers/etc can reproduce. (It’s 2D not 3D cause it’s normalized for luminance or brightness.) Color science is weirdly fascinating:
For Euclidean distance it seems to be in the neighborhood of (59, 250, 60) which is a bright green, although of course Euclidean distance is not perceptual distance. The blue at (57, 42, 214) also is up there.
Feature request: I want the name of the color I'm hovering over to pop up next to the color. I don't want to have to look in the top left to see the name, especially with the board spinning. Also, I want the specific circle I'm hovering over to get a bit bigger so that I can see its exact color better and know that I've selected it.
It would be great to see this for each culture around the world, identifying the named colours from their language / culture.
I saw a BBC? documentary about this years ago and it showed how some cultures had the ability to clearly identify different colours where I couldn't see any difference.
It turns out that knowing subtle differences in colours can have a strong impact on your daily life, so cultures pick unique parts of the colour spectrum to assign names to.
This cube is the "inverse table" used to map colors to a palette. The animated regions are tints and shades of pure red, green, and blue. Ideally, this cube would be a voronoi diagram, but that would be prohibitively expensive for Macs of the late eighties. Instead, they mapped the palette colors to indices into the table, and expanded the regions assigned to those colors via a simultaneous flood fill, like if you clicked the Paint Bucket tool with multiple colors in multiple places at the same time. Except in 3D.
Thief of Time by Terry Prachett has a great minor bit about characters who are naming themselves after colors running out of human made labels, as they have to get increasingly esoteric with the names.
It's fun to see that visualized.
My favorite bit of this survey (scroll down to "Miscellaneous") is that one of the color names in the raw data set is "unsure-whether-boy-or-girl baby room color". My daughter's room is this color - we painted before she was born. They told us we were going to have a boy but they misread the ultrasound.
What is interesting to me is the blank spaces for various naming systems. Ornithologist's view (Ridgway) versus Japanese traditional. Reminds me of the discussion of the blue/green distinction by Kay etc al.
I like the view into the black corner toward white. From that aspect, the black-white axis looks like an atmospheric effect, and the blacks appear as if they were opaque objects balls suspended in front of an illuminated fog.
It's probably just aesthetics. Those colors are more commonly used in illustration and design, so they tend to get labeled. There might be some perception involved in there as well as it's easier for our eyes to pick apart the more pastel colors from each other than the darker colors from each other.
i would expect the more dense part to be the smaller gamut that can be made with paint since we've been naming those colors for a lot longer than the larger gamut that can be made with a screen. The paint/print gamut looks kinda like the more dense parts of these scatter plots within the larger sRGB cube (though the paint gamut isn't entirely contained within sRGB).
I'm curious to understand the need to have names for such many different colors and I'd love to hear your take! A naive reasoning would say that names are useful if at least two different persons know the meaning for a name and thus it will help communication.
Now I'm not sure how many colors are there in that list, but it feels like there are too many to be practically useful. How do you see this?
RGB is a color model[1], not a color space[2].
Note that the headline gets this wrong but the page linked to gets this right.
sRGB or Rec2020 or ACEScg etc. are color spaces with known primaries and a known whitepoint. This is not nit-picky. Almost everyone doing CGI for the first time w/o reading up on some theory beforehand gets this wrong (because of gamma and then premultiplication, usually in that order).
Then there are color models which are also color spaces. CIE XYZ is an example.
[1] https://en.wikipedia.org/wiki/Color_model
[2] https://en.wikipedia.org/wiki/Color_space
While you are right, sometimes "RGB" is used as an abbreviation for some color space that is understood from the context, e.g. the CIE 1931 RGB color space (from which the CIE XYZ color space has been derived) or the RGB decoded correspondent of some TV color space, e.g. NTSC, PAL or SECAM.
Not an expert but I'll drop my 2c
Most of my career was somehow related to graphics programming and I always thought it's bit weird that most quantization algorithms were operating in RGB model despite the fact that it was designed for hardware, not so for faithful color manipulation.
The easiest way to see that is to imagine a gradient between two colors and trying to make it in RGB. It doesn't seem right most of the time.
If so, then why would we consider distance in 3D space between two colors as faithful representation of their likeness?
Well, lo and behold, it's 2025 and everyone finally accepting LAB as the new standard. :)
Except color is a construction of your eye-brain derived from stimuli, surround, memories, etc.
It's definitely not something you can plug into a three-value model. Those are good stimuli encoding space, however.
The distinction between brain-color and physical-color is what screws everyone up.
> It's definitely not something you can plug into a three-value model.
What do you mean? And what is screwed up? We use 3 dimensions because most of us are trichromats, and because (un-coincidentally) most digital display devices have 3 primaries. The three-value models definitely are sufficient for many color tasks & goals. Three-value models work so well that outside of science and graphics research it’s hard to find good reasons to need more, especially for art & design work. It’d be more interesting to identify cases where a 3d color model or color space doesn’t work… what cases are you thinking of? 3D cone response is neither physical (spectral) color nor perceptual (“brain”) color, and it lands much closer to the physically-based side of things, but completely physically justifies using 3D models without needing to understand the brain or perception, does it not?
I had experimented with some photo printing services and came across one professional level service that offered pigment inkjet printing (vs much more common dye inkjet printing). Their printers had 12 colors of ink vs the traditional 4. I did some test photos and visually they looked stunning.
fun fact: there's a guy with similar background to mine, with similar dedication to color, yet way more productive and he came out with this incredible piece of art: rebelle app
As with most recent technological breakthroughs it uses math from 1931 paper to magically blend colors in ways that seems so realistic it's almost uncanny.
thanks for brining that up. Its a fight I stoped fighting a long time ago...
Is this why there appears to be a quite distinct plane inside the cube? If we were looking at them in the colour space would it look more uniformly spread?
I originally made this about 8 years ago just for myself: to see where the color name list I maintain had gaps: https://github.com/meodai/color-names
As I learned more about color models, I kept adding different ones over time. The perceptual models helped me understand the “missing” areas much better.
Later, after building an API around the list (https://github.com/meodai/color-name-api ), I started including other lists with permissive licenses too.
Appreciate all the thoughts and feedback here. I’ve also changed it so the cube stops spinning once you interact with it.
Wish there was a way to make it stop spinning, it's practically impossible to figure out adjacent colors because everything keeps moving no matter what you do. Perhaps there is a way, but I didn't find it?
https://codepen.io/graypegg/full/XJXoxYB
Only change is lines 421 + 422 that sloooowly rotated the cube are commented out in the javascript, otherwise should act the same!
holy shit its so much better
changed the original: interacting with the cube will stop the spin
I changed it: as soon as you interact with it, it stops spinning
Same. So annoying.
I use a similar app called Name That Color — https://chir.ag/projects/name-that-color/#6195ED
I like sharing descriptive names with designers instead of naming everything "light blue" "dark blue" "not quite as light but still not dark blue" etc.
This new thing is tons of fun but seems a bit less practically useful.
You just reminded me that my app turned 18 a few months ago.
Another dev, Daniel Flück, extended the app to help color blind users: https://www.color-blindness.com/color-name-hue/
I am curious why in your example you compare indigo to violet and purple since purple has a major red component while indigo and violet are on the complete opposite end of the visible color spectrum and are single wavelength colors.
Very clearly shows much more sensitive our eyes are to luminance rather than hue or saturation, which was the main observation that allowed for the high compression rate of JPEG
Are you speaking of chroma subsampling, or is there a property of the discrete cosine transform that makes it more effective on luma rather than chroma?
Probably chroma subsampling - storing color at lower resolution than luminance to take advantage of the aforementioned sensitivity difference. Since it’s stored at 1/4 resolution it can alone almost halve the file size.
Saying it’s the insight that led to JPEG seems wrong though, as DCT + quantization was (don’t quote me on this) the main technical breakthrough?
Chroma subsampling was developed for TV, long before JPEG.
It's always struck me as odd how there are so many off-white colors in HTML/CSS compared to the rest of the space.
That’s because standard RGB is linear while human perception is closer to logarithmic.
Because there are so many off white colors in wall paint.
You mean all the low-saturation colors you see around the diagonal?
I think that is hat was meant and I wonder about that also.
Adding:
Looking some more I think it would be nice if the rotation could be stopped.
Labeling the axis would be nice also.
> I think it would be nice if the rotation could be stopped.
author said he fixed that, interacting will stop it now
When you switch the list to show just HTML/CSS colors, it's all the colors in the corner.
Vagaries of monitor technology and a lack of calibration/the difficulty of calibrating for lighter colours.
Is the initial setting (Color Name List) a list of ALL the colors in each "sub" category listed in the drop menu?
If so, would it be possible to put a "namespace" in front (like html.violet, or html::violet). That way you see which source it's from? That way you know where it's from (though I realize this may cause multiple "hits" on the same value/name) Or perhaps same names have different values.
Either way, pretty cool. I agree, it would be nice to have a button or mode to stop spinning without having to hack it manually.
No they are separate lists. "All Color Names" comes from: https://github.com/meodai/color-names
Great project! It's visually dazzling and it really drives home the sheer size of the universe(s) of named colors.
I've long been interested in the names of colors and their associations. If I may plug my own site a bit, check out the "color thesaurus" feature on OneLook that organizes color names more linearly. Start with mauve, as an example: https://onelook.com/?w=mauve&colors=1 (It also lets you see the words evoked by the color and vice versa, which was a fun LLM-driven analysis.)
I am the creator of the 3d thing that was shared. I am very interested in collaborating on something. Is the data you used for it accessible somewhere?
And how far things have come since the X11 color names
X11 color names are atrociously bad. Inconsistent prefixes and suffixes, flatly wrong names for many handfuls of RGB triplets, and it’s what got hard wired into CSS and HTML.
Why is #00FFFF called "Aqua" and not "Cyan"?
I guess there exist multiple names for the same colors, per https://www.w3schools.com/cssref/css_colors.php, and for some reason "Aqua" takes precendence in this display.
Could be just plain alphabetical. There's a selector for which color name list to use/examine on the bottom of the visualization. There's also a selector for which color space model to use.
What coordinate in the space is furthest from any named color? It looks like there are some relatively large voids in the blue/purple boundary area but it’s hard to say.
perceptual distance is quite different from Euclidean distance in this RGB space. Like if put two swaths of color side by side and said “how similar are these?” to samples of people, the groupings would not much resemble this cube.
They’ve done this! It’s shown on a “chromaticity diagram”, and is useful for comparing what colors different screens/printers/etc can reproduce. (It’s 2D not 3D cause it’s normalized for luminance or brightness.) Color science is weirdly fascinating:
https://en.wikipedia.org/wiki/Color_space?wprov=sfti1#
Here's the list of colors it works off of: https://github.com/meodai/color-names/blob/main/src/colornam...
I'm trying to figure it out.
For Euclidean distance it seems to be in the neighborhood of (59, 250, 60) which is a bright green, although of course Euclidean distance is not perceptual distance. The blue at (57, 42, 214) also is up there.
oh Id love to add this to the tooling of the color names list. How did you figure out what the largest gap was?
You can choose other color spaces here which is neat and helps visualize this a bit more accurately.
Neat!
Feature request: I want the name of the color I'm hovering over to pop up next to the color. I don't want to have to look in the top left to see the name, especially with the board spinning. Also, I want the specific circle I'm hovering over to get a bit bigger so that I can see its exact color better and know that I've selected it.
It would be great to see this for each culture around the world, identifying the named colours from their language / culture.
I saw a BBC? documentary about this years ago and it showed how some cultures had the ability to clearly identify different colours where I couldn't see any difference.
It turns out that knowing subtle differences in colours can have a strong impact on your daily life, so cultures pick unique parts of the colour spectrum to assign names to.
https://news.mit.edu/2017/analyzing-language-color-0918 and also https://theconversation.com/languages-dont-all-have-the-same...
VOX : The surprising pattern behind color names around the world https://youtu.be/gMqZR3pqMjg
If you're interested in this is as a board game - https://boardgamegeek.com/boardgame/302520/hues-and-cues
Bravo! I love color and color spaces.
I've been researching the way classic Macs quantize colors to limited palettes:
https://rezmason.net/retrospectrum/color-cube
This cube is the "inverse table" used to map colors to a palette. The animated regions are tints and shades of pure red, green, and blue. Ideally, this cube would be a voronoi diagram, but that would be prohibitively expensive for Macs of the late eighties. Instead, they mapped the palette colors to indices into the table, and expanded the regions assigned to those colors via a simultaneous flood fill, like if you clicked the Paint Bucket tool with multiple colors in multiple places at the same time. Except in 3D.
Neat seeing the different shapes the RGB space gets compressed into if you select a different colourspace on the bottom right.
Are there really no named colors outside the sRGB gamut?
Id love to start one. Not sure in what format to store them to be future proof though.
Randomly mousing over it I noticed "Trunks hair" (#9b5fc0) and had to look it up to be sure I wasn't crazy...
One thing I'd love to see is a comparison between named colors and colors in use. What areas are under represented by named colors?
Thief of Time by Terry Prachett has a great minor bit about characters who are naming themselves after colors running out of human made labels, as they have to get increasingly esoteric with the names. It's fun to see that visualized.
Xkcd Colour names based on a survey: https://blog.xkcd.com/2010/05/03/color-survey-results/
My favorite bit of this survey (scroll down to "Miscellaneous") is that one of the color names in the raw data set is "unsure-whether-boy-or-girl baby room color". My daughter's room is this color - we painted before she was born. They told us we were going to have a boy but they misread the ultrasound.
What is interesting to me is the blank spaces for various naming systems. Ornithologist's view (Ridgway) versus Japanese traditional. Reminds me of the discussion of the blue/green distinction by Kay etc al.
I like the view into the black corner toward white. From that aspect, the black-white axis looks like an atmospheric effect, and the blacks appear as if they were opaque objects balls suspended in front of an illuminated fog.
Can anyone explain the kind of dense cloud in the middle? Is that down to human perception? We don't give names to things we can't perceive uniquely?
It's probably just aesthetics. Those colors are more commonly used in illustration and design, so they tend to get labeled. There might be some perception involved in there as well as it's easier for our eyes to pick apart the more pastel colors from each other than the darker colors from each other.
i would expect the more dense part to be the smaller gamut that can be made with paint since we've been naming those colors for a lot longer than the larger gamut that can be made with a screen. The paint/print gamut looks kinda like the more dense parts of these scatter plots within the larger sRGB cube (though the paint gamut isn't entirely contained within sRGB).
Wait, does this not use the colornames.org dataset?
No it does not colornames.org emerged after my color name list.
I'm curious to understand the need to have names for such many different colors and I'd love to hear your take! A naive reasoning would say that names are useful if at least two different persons know the meaning for a name and thus it will help communication.
Now I'm not sure how many colors are there in that list, but it feels like there are too many to be practically useful. How do you see this?
Very nice! But there is no option to show color labels?
Is there a tool that can dither to named colors?
Oh yes, i also use the "Graphical 80's sky" when describing my car color. (#0000fc)
Now make it do a perceptually uniform color space.
[flagged]
It appears you have quite a few LLM generated comments on here, and I’d appreciate if you stopped. Thanks.