毫無疑問，高效的代碼工具能夠讓前端和網頁設計師的工作事半功倍。實用的代碼工具不僅能夠幫你更為有效的應付不同類型的任務，還能幫助你的項目更為有效的推進。

今天推薦的前端代碼工具能夠讓你擁有更為富有成效的工作流程，這些工具涉及到字體、色彩、PSD、HTML/CSS等多個不同的環節。合理的選取適合你的工具，并且運用到對的項目當中，當有奇效。

HTML COLOR CODES

如果你需要 HTML 色彩代碼，那么通過這里的取色器、色表，可以幫你快速獲取 Hex值，RGB和HSL值，對于設計師和前端而言非常實用。

FONTFLAME

Font Flame 是一個幫你無憂無慮地選取網站字體的服務，它會讓選取字體成為一種充滿樂趣的過程。

PURE CSS APPLE

這是一個純粹的蘋果設備的代碼轉換工具，全程只涉及到一些CSS3動畫和一些JS代碼。

CODESIGN

Codesign 是一個超級方便的在線工具，能夠讓你的設計擁有組織明確、快速干凈的視覺反饋。

PIXELMAPGENERATOR

PixelMapGenerator 是一個幫你制作高交互性、創意十足的地圖的工具，你可以幫你保存成為圖片或者JS代碼，便于網站使用。

DROP.JS

Drop.js 是一款JS庫，可以幫你生成各種下拉框按鈕等控件或者元素。

APOSTROPHE

Apostrophe 是一個基于Node.JS 和MongoDB 的內容管理系統，它可以幫你創造復雜的內容驅動的網站。

GRADIFY

Gradify 可以幫你從照片中找到主色調，并且生成一套可拓展、響應式的CSS漸變色代碼。

XPOSIT

無需編寫代碼，Xposlt 可以以可視化的方式動態編輯你的HTML文件 ，它還是一個開源的內容管理系統。

PARADEISER

Paradeiser 主要是幫你解決響應式網頁設計中最關鍵的元素之一——導航。

COPYNHASTE

不論你是不是程序員，這個網站都能作為一個展現你打字技能的平臺而存在。

CODEDOODL.ES

CodeDoodle 是一個用來策劃創意代碼涂鴉的地方，你在這里能夠看到各種各樣優秀有趣的動畫。

IOS COLORS

這個網站會為你提供一系列基于iOS的色彩或者漸變色彩的合集，值得試試。

FRONTIFY

在Frontify 的幫助下，你能創造許多漂亮的樣式，并且輕松地保存。

COHESIVE COLORS

Cohesive Colors 是一款能夠幫你創造充滿凝聚力配色方案的工具。

FLEXBOX

FlexBox 能夠幫你免費學習CSS Flexbox，你可以從免費提供的20個視頻中了解到關于CSS FlexBox 的知識。

GRID LAYOUT

這是一個輕量級的柵格系統，可以兼容橫向和縱向的Web應用，最關鍵的是它還保留了對于舊版瀏覽器的支持和兼容。

CSSPLUS

這是一個為前端所準備的基于CSS的工具，快速而強健是它的特色。

WALLOP

Wallop 是一個僅有4kb 的庫，幫你實現一款極簡的輪播圖，用來展示圖片等內容。

EXPORT KIT

Export Kit 是一款進階的PS插件，幫助用戶將PSD轉化為HTML、CSS甚至是Wordpress主題、jQuery代碼，甚至能夠兼容到Android平臺。