I'd like to introduce Flat Hue. (portfolio building)

Hello all,

I have been doing front end development for awhile and one of the things that takes the longest in the design aspect is color scheming. Finding colors, going back to my code, plugging them in to see how they look, rinse repeat.

I decided to create a little one page application called Flat Hue, for people to color scheme their website or application ideas. Simply change the values in the box or click the random color generator on the bottom of the page.

Simply trying to build my portfolio before I submit my resume out to a few companies soon. Oh yea, the project is also open source, so if you want to help me make it even better, we can get more experience together ; ).

Here is the link: Flat Hue


Hey man, neat color scheme. FYI, the “flat hue” image in the upper left is off-screen vertically (using Firefox 59.0.2)

1 Like

Thanks man for pointing that out! Working on it now

1 Like

alright I pushed the changes to master. Should be updated in the next 15 mins or so. I really appreciate the heads up man

1 Like

Looks good, dude. Centered, and above the main content.

1 Like

Thanks man. Looks alot better to be honest, I was just going for that one page look, but in reality it’s not feasible.

I’m not sure what you mean by “one page” look. Did you want it all to be above the fold?

Just like a one page application view. but using vh units forces stuff above the inner window on some devices.

I was reading your script. It took me a while to understand the decisions made by mariamrf in that flatcolor() function, but I get it now. Are you trying to design for mobile devices primarily? If so, I think you can basically follow the layout you have now for wider viewports, but just smaller in all dimensions. If desktops, then you have to deal with the landscape orientation of most screens, which mostly just requires moving the color randomizer up the screen. I would suggest refactoring the layout to abandon Bootstrap and go to CSS Grids, as in this video. That way the color “samples” you have below the preview can come to rest between the left-sided “color palette” and the preview. Grids will allow you to have granular control over the display area of each section, not just the 8.25vw multiples with which Bootstrap saddles you. Another future idea would be to have some way to have the samples populate the palette—much easier if they are next to one another on the screen— either by dragging or clicking a swatch and then clicking the target.

1 Like