EDIT: Author has pointed out that the interpolation mode can be changed. Very slick!

It looks like this is interpolating in HCL or HSV space— that tends to produce unexpected results, including intermediate colors with unrelated hues (pink between orange and blue?), or sharp discontinuities if one of the endpoints changes slightly (try mixing orange and blue, and then shifting the blue towards teal until suddenly the intermediate pink pops to green).

This document[1] also illustrates pretty well.

Interpolating in RGB space has its own issues (more so if gamma is not handled correctly) due to the human visual system's differing sensitivity to different colors— the result is often that two bright colors will have an intermediate color which is darker than either endpoint.

There's a known solution, thankfully: Mix colors in a perceptual color space like Lab or Oklab[2]. The behavior is very predictable and aesthetically pleasing.

[1] https://observablehq.com/@zanarmstrong/comparing-interpolati... [2] https://bottosson.github.io/posts/oklab/

First of all thanks for the comments and info. I'm actually not doing the color interpolation myself. I'm using chroma.js[1] for the most part.

You can actually change the interpolation mode on the bottom below the color boxes. The default is LCH because I think it looks the best most of the time, but you can use LAB if you prefer that.

[1] https://gka.github.io/chroma.js/

    CIE L*C*h is based on either CIE 1976 L*a*b* or CIE 1976 L*u*v*, it's just a different representation. <--for formatting or the asterisks vanish.

For displays you're incrementally better off using LChuv. But note that these are very rudimentary color appearance models compared to CIECAM02 and newer, where surrounding color and ambient light can be taken into account. For a given color, surrounding it with two different colors will produce a different color appearance for that given color, i.e. a spot measurement of the given color will of course be the same, but the color in context will be different. It's a feature of human vision. Simultaneous contract, Bezold effect, and so on.

But without display compensation (mapping the CIE color created for given RGB value, such that a color management system can alter the RGB sent to the display in order to preserve color appearance) you will still have the experience of getting a different color for a given encoding on different displays.

How far down the rabbit hole do you want to go? In any case, these are better than HSL and HSV representations.

tip: In HN comments you can write \* to display an asterisk.

Really cool site! After playing with it for a while, could the CSS gradient for MIX could be changed to use the same number of color stops as there are steps rather than just using the start and end, to better match the chosen interpolation mode? I had a great gradient in LAB space, but the CSS version interpolates through ugly greys in RGB.

That's a great idea! I'm gonna take a look at that.

Aha! That was a bonehead miss on my part. Very nice, and very slick interface. :)

Well it is very easy to miss. ;) Thank you!

Thanks so much for this info! I had no idea this was a solved problem.

Over the years I've seen many similar tools, however, this one is probably the nicest, simple and straightforward. Really great work!

Agreed! Great work, and in my main toolbox of go-to tools now.

Oh wow, thank you so much!

Seconded

I like it, however I wish the colors wouldn’t change constantly when I click between tools. I would like to explore the possibilities I would have with one or two colors.

That is definitely something that started to annoy me too. I will look into fixing that soon.

The UI seems responsive and produces nice looking results. However I found the usefulness of blending and mixing hampered by the fact that fine grained control of the saturation, luminance, etc. are only available in the modify tab. It would be more useful to me if I could modify those on any color I’m working with in the other tabs.

An idea for improvement would be to add a palette feature that you can see and modify on all tabs so you can create and modify a set of colors without having to copy them somewhere else before moving on to the next piece of a design.

I always saw them as separate tools because I always had predefined colors I wanted to mix/manipulate. But it's a really great idea to think more in the sense of a workflow (or steps) instead.

Thanks for the suggestion! I will see what I can do.

This is really pleasant to use. For years I've used https://paletton.com/ to similar effect, but I actually like the interface here a lot better. It's a bit simpler, and more straightforward. Great work!

Also adding this next to my paletton bookmark, amazing work indeed!

I'm really glad to hear that. Thank you!

It's been said several times already but I really love the names. They add so much flavor to it and, surprisingly enough, really seem to get my imagination going, haha.

Same, I'm so glad someone is taking the time to come up with all of those amazing names.

Hey, this is a really great tool, thanks for making and sharing with us!

One thing that I think would help is for the tool to not lose state when changing between tabs. You have the manual randomize color button, so it doesn't make sense to randomize on tab switch.

Then, in addition, sending colors from one tab to another. For example, I want to modify a color, and then send it to Mix Swatch 1.

Also, like everyone else, I love the color names! I'd love to see these applied to more swatches, like in the step names in Mix, or the color combinations in Info. Maybe it could show the names, and then flip to the hex value on hover.

Also, I would love if I could save off my settings in different tabs. I know I could just bookmark, but having an in-app method of saving/restoring would be wonderful.

Again, thanks for this! I am definitely adding this to my color toolset!

The color change when switching between tabs is definitely something I'm going to remove/fix soon. It didn't really bother me, but I see it now.

I also really like the color names. But I can't take credit for that, because someone else is doing all the hard work here: https://github.com/meodai/color-names Showing them in more places might be cool, but the performance might become an issue then.

Saving settings might also be a cool feature to add. I'm gonna look into that.

Thank you!

Nice work! I'm glad you support color spaces outside of RGB for blending. I've been working on designing some new color blending modes/spaces and I'm excited to see more anthropocentric math being used to generate colors in general.

https://twitter.com/thot_exper1ment/status/14903867798489047... <-- example of some blending in a color space i'm working on

In modify there are "brighten", "tint", and "lighten", and for uninitiated like me the difference seems pretty vague. I suppose they refer to some similar operations in different colorspaces, but the tool could be more intuitive here.

The nerd in me would wish that the tool would use primarily some top-tier colorspace like oklab, but I can understand why you didn't want to go down in that rabbithole.

You're right, this part can be a bit confusing. I tried to prevent it by adding short descriptions to the modifiers but there's definitely room for improvement.

I never heard of oklab before. Guess I have some reading to do. But I also wouldn't say no to a PR that adds support for it ;)

Is it possible to know about a certain color if it's dark or light? My goal is to automatically determine whether to put a white or black text on top of a background colored box based on the answer. Is it has something to do with the temperature? I'd expect to get some value below or above 0.5.

A simple function is to calculate whether the total of each RGB channel reaches a certain threshold, with different weights given to each channel. For an example, see the YIQ contrast function used by Bootstrap v4 [0].

WCAG defines their own algorithm for calculating the contrast between two colours to ensure good accessibility [1][2]. Bootstrap v5 uses this [3].

[0] https://github.com/twbs/bootstrap/blob/v4.6.1/scss/_function...

[1] https://www.w3.org/WAI/GL/wiki/Relative_luminance

[2] https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

[3] https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_function...

Great idea. I think this will fit nicely with the info tool. Also a accessibility contrast score might also be helpful. I will take a look at that. Thanks!

Look at the L for either LAB or LCH. It'll be between 0 and 100.

I really enjoyed adjusting the different knobs in 'Modify' mode to achieve something that 'felt' good to me. I don't know anything about color (as represented by computers or otherwise) but it was fun.

I also love the names that come up ("pig pink" v.s. "strawberry milk")

Really cool to hear that!

And the names are definitely awesome. All the credit for that goes to: https://github.com/meodai/color-names

Thank you for sharing! This is such a neat library.

Lots of kudos on the work you put in too! Your app is fun and super slick. Top notch design and frontend skills.

Thank you very much!

Thanks, came here to say, how'd you get the names. That's amazing

This. is. awesome. Thanks for sharing! I manage a lot of designs and guidelines for Open Source projects and the amount of time I spend translating color information into different values to make sure everything is "on brand" is ridiculous. This is going to save me ton of time

Thank you! Let me know if there is anything that you're missing or that can be improved.

I’ve run https://www.thecolorapi.com for years that offers similar color introspection via JSON API ergonomics.

> It's an attempt to create a simple but useful toolbox for common color related tasks and problems

this is better then the previous tool i was using as a toolbox. thanks for the work

Nice to hear, thanks.

Where do the color names come from? They're delicious.

I'm using meodai/color-names (https://github.com/meodai/color-names). Pretty awesome project.

This is quite nice.

I haven't had time to play with it much, so far, but, as it so happens, I have been working on color themes for my app, lately, using tools like this.

Minor bug: backspacing. Eg, edit some value, type "1", now backspace changes text to "NaN" instead of expected "". To make it a bit worse, users can't even do "01", now backspace changes to "" instead of expected "0". Both should be fixed imo.

Good catch, thanks. Gonna fix that.

Minor gripe: double clicking a hex color selects just the value and not the hash, which is good for text entry, but annoying when pasting a previously copied hex colour and you get ##ABCDEF. Might be nice to remove the duplicate ## or something.

Looks really good. I would love to be able to generate HCL palettes like https://medialab.github.io/iwanthue/

Wow!!! This is awesome, I've wanted something like the mix tool for quite some time.

Thank you!

Thank you! Please let me know if there's anything that needs to be improved.

I love this, it’s super smooth! Definitely bookmarking this for later.

Thank you!

I love this tool, especially that it's built with SvelteKit. Thanks for sharing it!

One thing I'm curious about that I couldn't discern from the GH repo: what's the license?

Oh, I totally missed adding a license... Definitely gonna add it later. In case you want to know now: it's gonna be MIT. Thank you!

Yup. This is my new favorite color tool website. Excellent work.

Wow, thanks!

Really loved the UI. Did you first create a prototyping with Figma or some other tool or just slowly iterated during your development till you were satisfied?

I initially started with this project to learn more about svelte and try sveltekit. So I never made a design or a prototype. I just had a rough idea of how I wanted it to look and then just iterated on it while building it.

nice project! Suggestion: for the blending tool, you could show a grid of every blending mode at once instead of needing to pick the blending mode one by one

Ohh, very cool idea. I'll experiment with that a bit and see how this could work. Thanks for the suggestion!

Very functional and straight forward to use tool!

Sure, there are a few enhancements that can be made (state management), but this is a great starting point. Nice job!

There's definitely quite some room for improvement. Thanks!

If this could be added as a Photoshop plug in, I as an artist would not think twice of forking some cash to get it, mark it as business expense

I've never build a photoshop plugin but it sure sounds interesting. I'm gonna see whats possible here. Thanks for the suggestion!

Your UI is really beautiful. Well done!

Thank you!

I notice on the modify page, dragging the sliders, the color update lags. Is that intentional?

This might have something to do with CSS transitions. It's not intentional. Gonna take a look at it later. Thanks!

Thank you, this is super useful!

Great tool! Does it account for gamma? Can the user enter a different gamma value?

Thank you!

Currently the user can't change the gamma value, because I personally never had the need for it. But I see why it might be useful and will look into adding that.

Shouldn't the browser account for it?

When mixing colors, gamma value is important, see for example [0]. A naive implementation would produce darker, and generally incorrect colors.

[0] http://blog.johnnovak.net/2016/09/21/what-every-coder-should...

just by looking at the homepage, i see nothing helpful. what does the website do? no idea. i'd suggest being more descriptive on the home page

I know what you mean but at the same time I think "toolbox for colors" describes it quite well with very few words. I also think it's best to just try the tools. But I do think that the tools themselves need descriptions and maybe even a small tutorial, so thanks for bringing that up.

Could you add support for 10 or 12 bit colors?

Interesting suggestion, I'll see what I can do.

Where do the color names come from?

I'm using this package: https://github.com/meodai/color-names