Color and Css Tools for Web Designers

banner color copy

In this article we have selected of few useful tools for web designers hoping to come to your help. The selection includes color tools, css tools and editors. Feel free to add some more in our comment section and enjoy!

Color tools

Check my colours – is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.

Color Blender – lets you pick a color value format, input two valid CSS color values in the format you chose, and pick the number of midpoints you’d like to see. The palette will show the colors you input as well as the requested number of midpoint colors, and the values of those colors.

Color Contrast Analyser – allows you to determine if foreground and background colors offer enough color contrast.

Color Contrast Analyser – An Alternative Analyser – this analyser uses also the Hewlett Packard threshold which, at 400, is 20% lower than the W3C counterpart.

Color Doctor – simulates the display content according to gray scale and color characteristics.

Color Palette Creator – It will create 10 shades of the base color, located top-left, at varying degrees of opacity.

Color Scheme Designer – A brand new interface, as well as the engine, all rewritten from the scratch. Rapidly increased precision and color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent URL of the scheme.

ColorSelector – is a software for judging the legibility of background and text colors.

The Color Wizard – color matching application for anyone who wants to create designs with great looking colors.

GrayBit – is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

Palette Grabber Firefox Addon – Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page.

Name That Color – tool that tells you the name of a color simply by clicking on the palette.

CSS tools

CSS Creator – allows you to create a simple CSS layout.

Clean CSS – optimizer that makes your CSS code cleaner and more concise.

Conditional CSS – allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

CSS Redundancy Checker – A simple script that, given a CSS stylesheet and either a .txt file listing URLs of HTML files, or a directory of HTML files, will iterate over them all and list the CSS statements in the stylesheet which are never called in the HTML.

W3C CSS Validation Service – Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

CSS Editors

Recommended text editors for Windows by – http://css-discuss.incutio.com/

Context – Freeware – Syntax Highlighting Plug-Ins for over 200 languages (you choose which ones to install and enable) plus translations to languages besides English. Small (1.5 MB) and very fast. Supports saving to *ix format (LF only) as well as DOS/Windows (CR/LF). Too many features to list them all.

CrimsonEditor – Freeware

EditPlus – A shareware editor for Windows. Features supporting many languages. Includes intelligent syntax highlighting and a FTP client among many other features.

TSW WebCoder- WebCoder? offers you extensive support for XHTML and CSS. The CSS tree creates an overview of an entire Style Sheet document. The Code Inspector allows you to edit both (X)HTML and CSS code using just the mouse. And with the CSS preview, it can’t get much easier. You don’t really need an external CSS editor (like TopStyle) anymore, since a lot of the same functionality is already in WebCoder?! When you want to validate your work, WebCoder? has integrated online validation of both (X)HTML and CSS documents through the W3.org validators. The results are displayed directly in WebCoder?.

HTMLKiT -  Freeware syntax highlighting editor for HTML, CSS, PHP, ASP, and other languages, also FTP support. Has an extensive range of 3rd party add-ins.

Notepad2 – Simpe to use “upgrade” of Notepad. Supports syntax-highlighing for a variety of languages, including CSS and HTML, fully customizable and easy to change preferences. Lighweight and fast to load. Standalone application. < 1MB in size.

Notepad++ – Simple, opensource notepad replacement with syntax highlighting for many popular languages, including CSS, HTML and

JavaScript. ~1MB in size

NoteTab freeware and shareware versions, similar to EditPlus with more robust clips for both HTML4 and CSS1. There’s also a variety of active support lists for beginners to advanced users for help with the program, clip programming, HTML and CSS. Also integrates with TopStyle for easy CSS editing in TopStyle.
PSPad – The universal freeware editor. Great tool whether you work with plain text (editor has a wealth of formatting functions, including a spell checker), you create web pages (as web authoring editor PSPad contains many unique tools to save your time) or you use it as an IDE for you compiler (editor PSPad catch and parse compiler output, integrate external help files, compare versions) and much more…
SitePad Pro – Scriptable Editor supports HTML, XHTML, XML, CSS, C#, C/C++, JSP, PHP, ASP, JavaScript, Java, VBScript, XML, FTP, Spellchecker, Template-based Generation, Project support, more…
Style Master – Shareware – Powerful, dedicated CSS editor with a plethora of CSS editing and troubleshooting tools.
TextPad – Shareware editor for Windows. Supports syntax highlighting lots of languages. Spell checking included.
UltraEdit – Syntax highlighting editor for diverse programming langauges; includes FTP client for quickly editing and saving and Spellchecker
Zeus for Windows – A powerful programmer’s editor designed for Windows developers. Highly configurable and packed full of features.

Dedicated CSS Editors

Stylizer CSS editor Stylizer is a futuristic visual CSS editor with a highly refined interface. It has some unique features, such as real-time preview, Bullseye (a replacement for Firebug), and a very nice real-time color manipulation model.

PHP Freedomeditor CSS-editor html/CSS-Editor in webbrowser, written in PHP and Javascript. Freedomeditor is a web-gui for editing all kinds of text documents with optional source highlighting or TINYMCE, can be easily modified to load input in unique ways for unique mime types, can convert a (x)html document with inline style tags to a (x)html document loading a generated css file, having the style tags removed from the (x)html. You create a template with Freedomeditor’s Tinymce integration and freedomeditor can remove TINYMCE’s inline style tags, save them to a css file, autoload that file on further HTML editing, Easy customizable GUI. Ever wanted to write CSS in your native language? Web CLI (phpterminal) and file browser included, Joomla password reset script and virtuemart batch stock updater, edit file in text format, syntax highlighting, + many more features. You can modify all aspects of freedomeditor from within freedomeditor. Reverse engineering at its best. GPL Licensed.

<oXygen/> CSS Editor (Win, Mac, Linux, Unix) allows you to edit and validate the CSS files. Different CSS profiles are supported like CSS2, CSS3, etc. and different media types like Braille or screen for instance. You can also choose the verbosity level of the validation warnings. The content completion provides property values associated with the property name. All the property names are annotated with descriptions from the CSS specification.

CSSEdit (Mac) – Shareware – Fast, dedicated CSS editor for Mac OS X with code completion, preview, visual property editors, and a beautiful interface. http://www.colour-crash.com/wallpaper/ Great Wall Site

CSSED (Unix, Linux), very nice CSS-(only)-Editor, with syntax highlighting, CSS-validation

StyleMaster (Mac, Win)- CSS editor for Windows and Mac featuring editors for all aspects of CSS alongside a complete set of tools for hand coding. Built in browser support and CSS info and internal previewing.

TopStyle (Win)- A shareware CSS and HTML editor by the creator of HomeSite?, with validation, code completion, selectable css profiles and many other tools.

Expression Web (Win)  Works CSS with other code systems like JavaScript, PHP, etc.); few templates, tons of functionality. Add-ins friendly – e.g.,

CSS Sculptor . As you work validation, accessibility and compatibility details. No specificity display for CSS elements and selectors yet, but CSS designers can trial and error in a very basic built-in preview substitute along with multiple browsers (any you select) in a built-in IIS7 shell.

iStylr (Web based), very nice CSS-Editor, with syntax highlighting, image generators for backgrounds and export options for different cms and blogs.

SnapCSS (Windows only), very simple CSS-Editor, with code formatting and collapsing so you can easily shrink the file for faster downloads and to save bandwidth, then beautify it so you can easily edit it.

Related posts:

  1. Firefox addon of the day – Palette Grabber
  2. WordPress plugins: WP User Country
  3. webdesigner firefox addon of the day
  4. Firefox addon of the day – Web Developer
  5. Artist worth mentioned – Marcin Stawiarz

11 Responses to “Color and Css Tools for Web Designers”

  1. alexc says:

    Very useful collection and inspiring too! tkx.

  2. [...] This post was mentioned on Twitter by bkmacdaddy designs and WPstudios, carswallpapers.us. carswallpapers.us said: RT @indeziner Color and Css Tools for Web Designers | INDEZINER http://bit.ly/27CfZt [...]

  3. Social comments and analytics for this post…

    This post was mentioned on Twitter by carswallpapers: RT @indeziner Color and Css Tools for Web Designers | INDEZINER http://bit.ly/27CfZt

  4. [...] INDEZINER November 5th, 2009 | Author: admin … Go here to see the original: Color and Css Tools for Web Designers | INDEZINER Share and [...]

  5. [...] That You Must See (Smashing Buzz) Latest High Quality Free Fonts for Your Designs (Instant Shift) Color and CSS Tools for Web Designers (InDeziner) Ways to Avoid Common Web Design Mistakes (Five Finger [...]

  6. [...] may also want to check out: How To Drive Traffic To Your Website! | Geo IP Location Affiliate …Color and Css Tools for Web Designers | INDEZINEREasyMemberPro Hyped Up » thinelectrons.comTwitter To Rollout A New API For Location-Based [...]

  7. [...] That You Must See (Smashing Buzz) Latest High Quality Free Fonts for Your Designs (Instant Shift) Color and CSS Tools for Web Designers (InDeziner) Ways to Avoid Common Web Design Mistakes (Five Finger [...]

  8. [...] That You Must See (Smashing Buzz) Latest High Quality Free Fonts for Your Designs (Instant Shift) Color and CSS Tools for Web Designers (InDeziner) Ways to Avoid Common Web Design Mistakes (Five Finger [...]

  9. [...] That You Must See (Smashing Buzz) Latest High Quality Free Fonts for Your Designs (Instant Shift) Color and CSS Tools for Web Designers (InDeziner) Ways to Avoid Common Web Design Mistakes (Five Finger [...]

  10. Color and Css Tools for Web Designers – INDEZINER…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  11. [...] That You Must See (Smashing Buzz) Latest High Quality Free Fonts for Your Designs (Instant Shift) Color and CSS Tools for Web Designers (InDeziner) Ways to Avoid Common Web Design Mistakes (Five Finger [...]

Leave a Reply