Monday, January 11, 2016

Colors...

Aloha,

Today I just have a little project for you which might be helpful for one or the other. When creating ui's or controls I always have the problem with choosing colors, esp. with things like Flat UI or Material Design based interfaces/controls. In those cases I usually go to the browser or a drawing program to pick the right colors.
So for those of you that don't know what I'm talking about you might want to take a look at


Those are nice websites where you can pick the predefined color values very easily but if you would like to add either a few of those definitions or all of them to your project you have to pick a lot of values.
So I decided to create a little jar that contains these color definitions so if you need either Flat UI colors, Material Design, Social or Windows 8 Metro Style colors you simply can add the jar to your project and use the colors by their name.

Let's say you need the Material Design color Amber 800, then you can use it like this...

Color amber800 = MaterialDesign.AMBER_800.COLOR;

with the Flat UI colors is it the same, here it would look like this...


Color peterRiver = FlatUi.PETER_RIVER.COLOR;

If you need the colors for something else or if you simply need an overview, I've also added two classes that shows you all colors in a grid and if you click on a color it will copy the values to the system clipboard.

The Material Design color picker



The Flat UI color picker



The source and binary can be found here...


That's it for today...so keep coding...


4 comments:

  1. Ideally the JAR would be runnable. Is it?

    ReplyDelete
    Replies
    1. Nope it's not because I didn't spend much time on creating a proper demo, just two classes that should give you an idea. You have to check out the sources to use them.

      Delete
  2. Very nice - can these be used in CSS files? If so, how?

    ReplyDelete
    Replies
    1. I guess for only the web color you better use the websites I've mentioned, there you can simply copy the css compatible code and paste it to your css file.

      Delete