$blue-100 in hex code

Want to discuss something with the Inkscape community that doesn't relate to Inkscape? Discuss it here.
meetdilip
Posts: 66
Joined: Sun Dec 03, 2017 12:28 am

$blue-100 in hex code

Postby meetdilip » Sun Oct 20, 2019 12:21 pm

If you see how colours are defined in this palette, they are based on an initial hex value

https://codepen.io/emdeoh/full/WNNojyz

Is there any method using which we can define them all as hex codes ?

User avatar
druban
Posts: 1917
Joined: Fri Nov 20, 2009 10:48 pm

Re: $blue-100 in hex code

Postby druban » Sun Oct 20, 2019 1:04 pm

you can just type in the hex code in the bottom right of the fill and stroke dialog. But I seem to remember we have gone through this before and that's not what you want. Where exactly would you like to enter the hex#? One of the solutions from before allowed you to make your own palette, but that did not do it? And have you tried the built in Webhex palette, which appears to be very close to the palette you have attached.
Your mind is what you think it is.

meetdilip
Posts: 66
Joined: Sun Dec 03, 2017 12:28 am

Re: $blue-100 in hex code

Postby meetdilip » Sun Oct 20, 2019 2:18 pm

Thanks @Druban I figured out how to create a palette.

Please check the link in the first post. It has colours listed which will be part of Bootstrap 5. There is a 10x10 table. Only 10 primary colours are available as hex codes. Others are $red-100, $red-200, $red-300 etc. I am trying to figure out what will be corresponding hex code for those entries ( $red-100, $red-200, $red-300 ). I was told they are hue based variants. Can we figure it out ourselves ?

User avatar
druban
Posts: 1917
Joined: Fri Nov 20, 2009 10:48 pm

Re: $blue-100 in hex code

Postby druban » Mon Oct 21, 2019 3:11 pm

you can open the file in inkscape and use the dropper tool to sample the colors, using the first patch as a test to make sure your color space is not too far off from theirs.

Edit: I had another look at their page, and it's all in the css. You can download the entire CSS part and all the hex nos. are in it, or you can inspect the page in your browser, look in the editor view, CSS panel to se which hex is behind each name. here's an example screenshot
oh I can't attach files here
https://1drv.ms/u/s!AlCmyCy3FECBiYxSjs8ha-NkYEEBBA

You can see in the middle panel the CSS for each patch, e.g. indigo-500 is #6610f2, indigo-600 is #560dcb

Hopefully that's what you are looking for
Your mind is what you think it is.

meetdilip
Posts: 66
Joined: Sun Dec 03, 2017 12:28 am

Re: $blue-100 in hex code

Postby meetdilip » Mon Oct 21, 2019 5:01 pm

Thank you. I relied on the " Inspect element " in the end. In the Bootstrap documentation, they have some data on how they use grey shades ranging from 100 to 900. Luckily there was this link which we could rely on.

Update :

My repo got merged to Inkscape's Gitlab repo. The Bootstrap 5 colour palette will be now part of Inkscape from the next version.

User avatar
druban
Posts: 1917
Joined: Fri Nov 20, 2009 10:48 pm

Re: $blue-100 in hex code

Postby druban » Tue Oct 22, 2019 12:40 pm

Awesome! I like new palettes
Your mind is what you think it is.

meetdilip
Posts: 66
Joined: Sun Dec 03, 2017 12:28 am

Re: $blue-100 in hex code

Postby meetdilip » Fri Oct 25, 2019 4:21 pm

Thanks @druban :)


Return to “Off topic”