Follow Us

Copyright 2017 Pan-creators


웹 디자인을 위한 훌륭한 도구들

부제: 완벽한 컬러 팔레트를 만드는 데 도움이 되는 10가지 무료 도구

The best colour tools for web designers

웹 디자이너로서, 중요한 선택 중 하나는 색상 선택과 관련이 있습니다. 잘못된 색을 고르면 좋은 기회를 놓칠 수도 있습니다. 우리가 선택한 색들은 보는 사람들에게 심리적인 영향을 미칠 수 있습니다.

예를 들어, 빨간색은 일반적으로 높은 에너지로 간주되지만 파란색은 차분함과 평화를 의미합니다. 이 점을 설명하기 위해, 어린이들의 장난감을 판매하는 웹 사이트와 로펌 웹 사이트 색을 생각해볼 수 있습니다. 아마도, 선명한 색과 밝은 색은 장난감 웹 사이트에 사용하고, 파란색과 회색 톤의 밝지 않은 색을 로펌 웹 사이트에 사용할 것입니다.

하지만 어떤 색상이 잘 어울리는지 어떻게 알 수 있을까요? 운 좋게도, 실용적인 색상 팔레트를 조립하기 위해 색상 이론의 달인이 될 필요가 없습니다. 색상 선택의 중요한 과제를 해결하기 위해, 웹상에서 무료로 사용할 수 있는 무료 색상 도구가 있습니다(Mac 사용자의 경우에는 특별 보너스로 하나가 더 있습니다).

1. Adobe Color CC
무료 도구 Adobe Color CC는 한동안 존재해 왔으며, 컬러 팔레트를 고르는 데 있어 가장 좋은 색상 도구 중 하나입니다. 자신만의 색상 구성표를 만들 수 있을 뿐만 아니라 다른 사람들이 만든 것을 탐색할 수도 있습니다.

휠 또는 이미지에서 색상을 선택하고 보색, 단색 또는 선택한 색상의 음영만을 사용하여 색상 팔레트를 생성하는 등의 색상 규칙을 적용합니다. 또는 각 색상을 클릭하고 색상 휠을 탐색하여 선택 항목을 맞춤화합니다. 추가 보너스로 직접 만든 테마를 Adobe Library에 저장할 수 있습니다.

2. Colordot
Hailpixel의 Colordot은 색상 팔레트를 만들 수 있는 훌륭한 무료 온라인 도구입니다. 간단한 마우스 제스처를 사용하여 색상을 선택하고 저장할 수 있습니다. 마우스를 앞뒤로 움직여 색조를 조정하고 위아래로 움직여 밝기를 조정합니다. 스크롤 해 채도를 조정하고 클릭하여 팔레트에 색을 저장합니다. 각 색상 RGB 및 HSL 값을 보려면 Tog(도구) 아이콘을 클릭합니다.

또한 카메라로 색상을 캡처할 수 있는 0.99달러/0.99유로의 iOS 앱이 있습니다.

3. 147 Colors
쉽게 읽을 수 있는 CSS를 만들 책임이 있는 경우, 때때로 표준 색상과 색이름을 사용하는 것이 좋습니다. Brian Maier Jr의 147 Colors 덕분에, 모두 흘끗 보고 작업을 위해 원하는 색상을 고를 수 있습니다.

17개의 표준 색상과 130개의 다른 CSS 색상 이름을 포함하고 있습니다. 파란색, 녹색 등의 음영으로 결과를 필터링 하거나 전체 무지개 색상 중에서 147가지 색상을 선택합니다.

4. Color Palette Generator
Canva의 Color Palette Generator는 이미지에서 색상 팔레트를 만들고자 할 때 완벽합니다. 이 도구를 사용하면 이미지를 업로드할 수 있으며, Generator가 5가지 주요 색상의 팔레트를 나타냅니다.

원하는 색상을 클릭하고 HEX 값을 클립 보드에 복사할 수 있습니다.

5. Material Design Palette
Material Design Palette를 사용하면 두 가지 색상을 선택할 수 있습니다. 그리고 다운로드할 수 있도록 컬러 팔레트로 변환됩니다.

이 회사는 또한 디자이너들이 상응하는 HEX 값과 더불어 다양한 색상의 색조를 볼 수 있도록 Material Design Colors를 제공합니다.

6. ColourCode
Tamino Martinius와 Andreas Storm의 ColourCode는 Colordot와 비슷하지만 좀 더 많은 안내를 제공합니다. ColourCode를 사용하면 컬러 휠을 따라 다양한 옵션을 설정하여 다른 조합을 만들 수 있습니다.

팔레트를 저장하거나 SCSS 또는 LESS 파일로 내보낼 수도 있습니다. 원하시면 PNG로 내보낼 수 있습니다.

7. Color Calculator
Color Calculator는 색상과 색상 조화 옵션(colour harmony option)을 선택할 수 있습니다. 따라서 권장되는 색 구성표의 결과를 나타냅니다.

하지만 이 사이트에 대해 좋은 점은 색상 이론과 색상 선택에 관한 세부 사항들에 대해 조금 더 상세히 설명하고 있다는 것입니다.

8. HTML Color Code
Dixon&MoeModes의 이러한 자유로운 도구 모음에는 색상 규칙에 대한 풍부한 설명이 포함되어 있으며, 컬러 디자인 색채, Google의 Material design 설계도, 고전적인 웹 안전 색상 팔레트, 표준 HTML컬러 이름 및 코드가 포함되어 있습니다.

이 사이트는 또한 웹 디자이너를 위한 튜토리얼 및 기타 리소스를 제공하며, 이 도구를 사용하여 HEX 코드, HTML, CSS 및 SCSS 스타일로 내보낼 수 있습니다.

9. W3Schools: Colors Tutorial
다양한 도구를 포함하는 올인원 솔루션을 찾고 있다면 WSchools의 색상 튜토리얼은 완벽한 선택입니다.

색상 이론, 색상 휠 및 색상 색조에 대해 배울 수 있을 뿐만 아니라 색상 변환기와 같은 다른 도구를 사용할 수도 있습니다. 이 도구를 사용하면 이름, HEX 코드, RGB, HSL, HWB, CMYK 값 등의 색상을 변환할 수 있습니다.

10. Digital Color Meter (Mac)
맥 유저들을 위한 도구입니다. 기계의 내장된 Digital Color Meter 도구를 사용하면 화면의 아무 곳에서나 컬러를 캡처할 수 있고, 그 값을 10진수, 16진수 또는 백분율로 설정할 수 있습니다.

또한, 선택한 색을 텍스트 또는 이미지로 복사할 수도 있습니다.

출처 : 원작자 ㅡ Tammy Coron | 튜토리얼 ㅡ http://www.creativebloq.com/advice/the-best-colour-tools-for-web-designers