Colour codes for best UI designs

[Piman (Mossy Michael)]

Great guide, really helpful

[The_K_Studio (Karan M.)]

Thanks guys

I found that many Kodular users are weak in UI design due to lack of knowledge in choosing and applying correct colour combinations for their projects.

If you notice UI designs available on Dribble, they looks awesome and professional only due to the colour combination they use.

So, I thought let’s share some colour combinations and gradient colour codes to the community to help them in improving their UI including me.

[Meghraj_Singh (Meghraj Singh Beniwal)]

So if we need to set background color of let’s say any screen then we can’t provide the hex code there. First we need to get the RGB code for the given Hex code?

[The_K_Studio (Karan M.)]

@Meghraj_Singh

First we need to get the RGB code for the given Hex code?

No!

You can directly enter HEX colour code in designer colour picker.

[dora_paz (Dora)]

No just put hex code in color picker

[Meghraj_Singh (Meghraj Singh Beniwal)]

I thought to make a list of various HEX codes and then select a random on screen initialize.

[Vaibhav]

@Meghraj_Singh

I thought to make a list of various HEX codes and then select a random on screen initialize

May be color utilities component can help

[The_K_Studio (Karan M.)]

Not necessary, as he can also put HEX color directly.

[Vaibhav]

I think he is asking for changing the color from block section. And if yes then upto what I know you can use color utilities in case you want to directly use HEX color code.

[hammerhai (Nathan)]

@dora_paz

No just put hex code in color picker

Yes! You only have to enter the 6 characters of the HEX code, no need to add FF to the end as it will do that by itself

[dora_paz (Dora)]

I know , photo was taken after color was already set . Also changing FF changes the transparency of the color for example if you replace FF with 99 , transparency is set to 50%

See Hexadecimal color code for transparency

Also if you are using color utilities transparency is set after # and not in the end for example #995AA7A7 sets transparency to 50%

[hammerhai (Nathan)]

If you’d like to know more than just a third (99)

https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

[dora_paz (Dora)]

We are saying the same thing I believe

@dora_paz

See Hexadecimal color code for transparency

@hammerhai

If you’d like to know more than just a third (99)

[Vishwas (Vishwas Adiga)]

The colour picker also accepts three digit inputs. For example, ABC is implicitly converted to AABBCCFF

[hammerhai (Nathan)]

I didn’t notice your link

[almeidapablo (Pablo A. Rod.)]

This is a very silly topic when you first look at it, but thinking better it is fantastic.

Specially for people like me, who are horrible with design and specially in choosing collors.

[com_s4n (s4n B)]

Nice Job! This is a great help as i mostly suffer on color selection…

[ShadowDEV_fr (ShadowDEV)]

I also recommend https://materialui.co/colors for material design colors, or the official color tool, that allow you to make good color schemes. Color Tool - Material Design

[wahyu_arya_pambudi]

Thank you for sharing this color