배경 & 텍스트 색상 선택 및 비교 서비스 소개, 온라인 색상 도구들

서비스 바로가기

대표 기능은 색상 선택 및 미리보기, 색상 반전, 색상 비교입니다.

배경과 텍스트 색상을 쉽게 선택하고 미리보기로 확인할 수 있도록 만든 서비스입니다.

선택된 배경색과 텍스트 색을 반전 시켰을 때 어떻게 보여지는지 빠르게 확인이 가능합니다. 또한 선택된 배경과 텍스트 색상을 복사 후 다른 색으로 변경하여 어떤 색상 조합이 나은지 쉽게 비교할 수 있습니다.

또한, 텍스트를 변경하고 폰트 크기를 조절하여 본인이 원하는 조합으로 확인할 수 있도록 했습니다.

(참고로, 시계 서비스를 만들기 위해 배경색과, 시계 텍스트 색상 조합을 고민하는 중에 색상 비교가 힘들어서 만든 서비스입니다.)

아래 이미지는 기본 색상에서 [+]로 복사하고, 색상을 반전(swap)시킨 후 [+]로 다시 복사하고, 다른 색상으로 변경해본 상태를 캡쳐한 것입니다.

위 서비스는 제가 색상 선택 시 비교를 위해 만든 서비스이고, 색상 선택에 도움이 되는 온라인 색상 도구들도 함께 소개해볼까 합니다.

어도비의 온라인 색상 선택 툴로, 유사색/보색 등 색상 선택을 도와주는 사이트입니다.

Colordot 서비스 바로 가기: https://color.hailpixel.com/

접속하면 화면에 단색 화면과 색상코드가 표시되어있습니다.

좌/우로 움직이면 색상(Hue)이 변경되고, 상/하로 움직이면 명도(Lightness)가 변경되고, 스크롤로 채도(Saturation)가 변경된다고 설명되어있습니다.
(디자인쪽으로 익숙하지 않은 저는 그냥 마우스를 마음껏 움직일 뿐입니다만...;;)

원하는 색상이 나왔을 때, 마우스를 클릭하면, 새로운 색상 영역이 추가됩니다. 각자의 색상표를 만들때 좋을 듯 합니다.

ColorHexa 서비스 바로 가기: https://www.colorhexa.com/ffc107

선택한 색상에 대한 정보가 서술되어있습니다.
(예를 들어 링크의 색상에서는 100%의 빨간색, 75.7%의 녹색 및 2.7% 파란색으로 구성되었다는..)

해당 색상에 대한 여러 코드표, 보색표, 비슷한 색상, 텍스트/배경/테두리 색상으로 쓰였을 때 미리 보기 등 하나의 색상에 대한 여러 부분을 볼 수 있습니다.

디자인(색상)에 대한 지식이 있다면 더욱 유용하게 쓸 수 있을 듯 합니다.

Color Contrast Checker 서비스 바로 가기: https://coolors.co/contrast-checker/

텍스트, 배경 색을 선택하면 해당 색상 대비 점수를 표시합니다.

대비 점수가 좋을 수록 글자가 더 잘 보이겠죠?

본인 눈에 예쁜 색상, 텍스트 읽기에는 불편한 색일 수 있으니 색상 대비표를 확인해보는 것도 좋습니다.

Flat UI Colors 2 서비스 바로 가기: https://flatuicolors.com/

미리 정의된 색상 팔레트가 있고, 본인이 원하는 팔레트를 선택하면 쉽게 색상 코드를 복사할 수 있습니다.

material design palette 서비스 바로 가기: https://www.materialpalette.com/

안드로이드 어플 개발 시 유용할 수 있는 색상 팔레트로, 색상 두개를 선택하면 primary color, accent color로 지정되면서 연관된 다른 색상들도 함께 지정되고 미리보기 할 수 있습니다.