Convert color to rgb or hsb

A feature I’d like to see in Hopscotch is: Changing colors like rgb to hsb

I’d use it for this type of project: A game where you had to make brightness match with an object

Here are some examples of Hopscotch

code that could be improved if we had this:
You don’t have to have all colors in hsb just to do that

Here is an example design I’ve made:

I’ve seen something similar in another programming languages, it looks like this:

I haven’t seen anything like this in other languages

10 Likes

Can you please elaborate? I’m not quite sure what you mean.

5 Likes

i don’t think this should be available in a block, but rather an option when inputting a rgb/hsb value

like when you’re inputting rgb(50,81,19) you wont be able to guess the hsb value in your head, and vice versa

5 Likes

Yeah. You actually can by selecting a color and adding a math option but that only works with default colors and only changes to hsb

5 Likes

There are so many conversion programs on the internet, and I’m sure lots of apps have that functionality, too. Or you could just uniformly use HSB or RGB for all colors.

Actually what would be really cool is a project that converts HSB to RGB, and vice versa (I believe there already is one, actually)

6 Likes

yep, i saw one on hopscotch and it was really awesome

i guess what bobinny wishes is that the conversion is more convenient (like you dont need memorize the three values and exit the app and blablabla) but we shouldnt forget tht is a super small team so they won’t focus on having convenient stuff atm

7 Likes

That’s true. But how often does one work with both RGB and HSB in the same project?

4 Likes

Sometimes hsb is easy for me and sometimes rgb is easy too. But it gets harder when I want a lighter or darker color

5 Likes

You mean something like GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript?

4 Likes

Even after reading the posts here, I can’t figure out what you mean by a color conversion block…

  1. It makes no sense to me being in a color parameter, because it’s just going to be the same color as your input. Like, if you say set color to “convert HSB(0,100,100)” it would be set color to rgb(255, 0, 0), but that’s the same thing…?

  2. Or do you mean an operator, like “add” and “subtract” – those return a value, but I’m still not sure how that would return a color (especially cause HS doesn’t have arrays).

Could you elaborate more on the use case? Like, what sort of project would you make with it?

Was it this one?

6 Likes

Not sure about Tri, but that’s the one I was thinking of~

I remember I wasn’t able to open it on my old iPad and got really frustrated. (Because I hadn’t updated HS yet at the time)

But I used it a lot before I had access to the internet.

5 Likes

i rather think this will make sense if it’s a tool, not a block

nop, it was by ketchup something

4 Likes

Here’s a trick that might help you!

If you have a HSB color, changing the B value (which stands for “Brightness”) is an easy way to make a color lighter/darker!

So, for example, to make the color HSB(200,40,50) lighter, increasing 50 (for example to 80) makes the color lighter.

If you’re looking for some websites to help you with colors, you can try looking at the one I linked in the aqua text in this post or look here. If you’re using online converters, keep in mind that many of them call it “HSV” instead of “HSB”. They are exactly the same! You might see HSL too, and that’s, however, different.

4 Likes

I’ve seen HSV where the V had a max value of 255. It was super annoying.

3 Likes

Yes, there are some people who write 0-100 as 0-1 instead too. That’s why it’s great to have converters!

4 Likes

I think it would be handy if you had an rgb colour, but wanted to make it brighter/darker, or if you wanted to change saturation etc…

2 Likes

I guess so, but again I’m not sure where the proposed editor change is – what would probably help is having a sketch or concept of a converter or something in the HS editor.

Once you are super familiar with RGB and hex, you’ll know how to do this without converting. That said though, it would be something really useful to have as a built-in tool in some way.

(I’m going off the assumption that you’d use it to make adjustments to a hex or rgb color you found online that doesn’t have its own way of adjusting the color?)

2 Likes

If someone wanted to convert RGB to HSV programmatically in Hopscotch, there’s a Wikipedia article with the formula for that here:

It’s kinda complicated to read but the math there adds up!

I found this JavaScript code snippet from this website that can convert from RGB to HSV, but I’m not sure if it works. I tried converting it to Hopscotch and I didn’t get it to work.

const RGBToHSB = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const v = Math.max(r, g, b),
    n = v - Math.min(r, g, b);
  const h =
    n === 0 ? 0 : n && v === r ? (g - b) / n : v === g ? 2 + (b - r) / n : 4 + (r - g) / n;
  return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
};

RGBToHSB(252, 111, 48);
// [18.529411764705856, 80.95238095238095, 98.82352941176471]
5 Likes