4 Ways to add color to your website

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}, 50);}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [2, current_page]);} );} );

Changing the color of a Premium WordPress theme is easy; finding the inspiration is tricky.

We pack our collection of themes with ten color choices, but what if we didn’t get that shade of blue you were looking for quite right? Perhaps your client needs to match a brand scheme that wasn’t included.

Fear not.

Here’s a list of great resources for gathering colors to include in your next custom website launch!

Customizing colors

First, before you begin any custom styling, you need to create a child theme.

Creating a child theme allows you to modify the style.css file without overwriting the original. So make sure you do that first.

From there, you want to grab the color code and apply it to your style sheet. If you’re anything like me, you’re going to dig in with the Chrome inspector tool to see what colors we can change.

Once you know which elements you want to hit, it’s time to pick a color.

Colour Lovers

This is my go-to site for browsing and finding the following best color scheme. It’s like a Facebook for color picking — if you can believe that. You can browse by daily, weekly, monthly, or all-time popular schemes. Careful, you might get lost there for a few hours.

Flat UI Colors

Flat UI is all the rage, and the bold simplicity attracts me to this site. It’s all a snap to copy color codes with their drop-down. It doesn’t have as many choices as Colour Lovers, but you won’t be lost here for hours. Maybe a great site to send to a client?

Adobe Kuler

Ah, the color wheel is always a good time!

Adobe gives us this tremendous interactive wheel to help us select complimentary colors. Set the dial and spin to win. The corresponding color codes will dynamically change at the bottom of the tool.

ColorZilla

http://goo.gl/MLsGxF

Need to copy a color from an image on a website, or you can’t find the color code in the CSS?

Try out this free Chrome extension, ColorZilla. After you install it, you will get an eyedropper tool that allows you to grab a color from anywhere on a webpage. Super useful!

Have a tool or website you prefer? Let us know in the comments!

Share Tweet Share