color reference : 프로젝트를 하면서 유용한 색상 사이트 모음

최근 다시 프로젝트를 준비하면서 디자이너가 따로 정해진 자가 없기에 각자 퍼블리싱을 준비하고 있다.

그렇다 보니 다양한 사이트가 나오게 되면서

필자는 괜찮은 사이트를 몇 개 정리를 하기 위해 오늘도 글을 쓰게 되었다.

 

 

 

1. Open Color

open color main site

 

이 사이트는 이전 프로젝트를 할 당시 어떤 분이 팔레트로 이 사이트 작업을 진행해주셨다.

그때 보고는 이게 무엇인가 잘 몰랐지만 생각보다 유용해 보여서 가져오게 되었다.

그리고 새로운 프로젝트에도 꽤 유용할 것 같아서 가져오게 되었다.

 

open color main site part1

가장 많이쓰이거나 인기 있는 색상들을 10단계로 표현을 하였다.

무엇보다도 가장 마음에 들었다는 것은 칼라를 10단계로 나누어 표현을 한 것이다.

필자와 같이 칼라고자(?)는 색상 고르는데 생각보다 오래 걸린다.

그래서 이러한 칼라차트는 나에게 새로운 정보를 주고 감사히 잘 쓰게 되었다.

 

open color main site part2

 

필자의 기준에서는 칼라는 필요한 만큼 적절히 있다.

미니 프로젝트를 하기엔 더없이 만족스러운 코드로 구성이 되어있다.

물론 디자이너에게는 아쉬운 양이겠지만 말이다.

 

 

2. Color Hex Color Code

color hex color code main site

 

이 사이트는 바로 얼마 되지 않아서 찾은 사이트다.

프로젝트를 할 때 다른 사람이 코드를 작성을 하셨지만 어떤 코드인지는 확인할 방법이 없다.

그래서 그걸 비교해볼 수 있는 사이트를 찾다가 우연히 발견하게 되었다.

 

color hex color code main site part1

 

제일 먼저 눈에 띄는 것은 User Lastest Favorite Colors다.

이건 최근에 사용자들이 좋아한 칼라를 모아둔 것 같은데 정말 중구난방으로 구성이 되어있는 색상이다.

 

상단에 LatestPalettes를 클릭해 보았다.

color hex color code - Color Palettes Color Schemes

역시 찾아보니 팔레트가 하나 구성이 된 것을 볼 수 있다.

색상을 정리한 사이트는 대부분 자기들만의 색상표가 있다.

처음에는 이 코드를 잘만 활용한다면 멋진 프로젝트를 만드실 수 있다.

 

다음은 좌측에 Get Info를 눌러보았다.

color hex color code - find hex color

색상에 대해 hex, name, rgb, hsl 등 다양한 방법으로 검색을 하여 Get Info를 하면 확인할 수 있다.

 

그리고 더더욱 좋았던 점은 아래로 스크롤하면 볼 수 있다.

color hex color code - find hex color part

여기서 디테일함을 볼 수 있게 CSS까지 잘해둔 것을 볼 수 있어서 매우 놀라웠다.

하지만 필자가 느끼기에 여기 부분에서 가장 유용한 것은 CSS3 Examples 이 부분이다.

이유는 필자가 퍼블리셔 과정을 배웠을 당시에는 HTML5, CSS3를 하면서 웹 표준을 중시하였기에

저 코드는 꽤 유용할 수 있다.

 

 

3. Coolors

coolors main site

필자가 원하던 것이 이것이다.

이 사이트는 start the generator를 클릭하게 되면 다음과 같은 화면이 나온다.

 

coolors part

실질적으로 이것이 메인 사이트라고 해도 과언이 아니다.

요기에서 새로고침을 하면 색상이 랜덤으로 변환이 되는 것을 볼 수 있다.

 

무엇보다 좋은 것은 색상 고정, 변환, 위치 이동, 색상 추가, 코드 복사 등 다양하게 활용할 수 있는 최대의 장점이다.

필자가 느끼기에 이 사이트만큼 내가 원하는 색상 코드가 없지 않나 싶다.

 

 

 

이렇게 오늘은 색상에 대한 이야기를 해보았다.

개발자라 색상에 대해 알 필요가 없겠지 싶겠지만, 생각보다 쓰는 일이 종종 생길 수 있다.

그때 혹은 토이 프로젝트할 때 도움이 되기를 바라면서 마무리를 해본다.