웹솔루션개발 25년 노하우! 해피CGI의 모든것

하나의 color 를 계층으로 나누어 최적의 컬러를 비교할 수 있고, 하나의 색상외에도 다양한 컬러값을 설정하여 원하는 컬러조합을 찾을 수 있는 colorbox 입니다. 컬러 색상을 클릭하면 "색상, 명도, 채도" 등을 선택하여 원하는 컬러를 찾을 수 있습니다. colors 를 추가하면 다양한 레이어로 확장되어 컬러군을 비교하여 원하는 색상을 비교할 수 있습니다. 홈페이지 제작부터 브로슈어, 인쇄물, 로고, 영상 제작 등 다양한 콘텐츠별 컨셉에 맞는 컬러를 찾기에 유용하며 보다 전문적인 디자인 영역에서 유용하게 이용이 가능합니다.

다양한 컬러 조합을 확인하고 제공해주는 klart 입니다. 스페이스바를 클릭시 새로운 컬러조합을 확인 가능합니다. 컬러조합별 사이트 정보를 클릭시 해당 조합으로 사용중인 사이트 목록도 확인 가능합니다. 색상조합이나, 선택에 고민될때 아주 유용한 사이트네요,.

색상 선택을 구글 문서 스타일을 이용해서 할수 있도록 하는 jquery/bootstrap 플러그인 입니다. 다운로드 받은 파일의 압축을 해제후 index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 일반적인 컬러피커들과는 다르게, 많은 색상을 선택할 수는 없지만, 자주 사용이 될 만한 색상만 모아두고 조금 더 쉽게 사용할 색상을 선택하도록 하기에는 유리해보이네요.

앱, 웹 제작시 색상의 조합 고민을 해결해줄 세련된 색상 조합 서비스 사용자가 원하는 색조합을 구성하거나, 공유도 할 수 있습니다. 추천수가 많은 순으로 최신 색 조합도 확인 가능합니다. https://coolors.co/browser/latest/1 사이트 제작시 색 고민에 빠지신 분이라면 강추입니다.

사용자가 고른 색상을 기준으로 색상을 추천해주는 사이트 "Khroma"를 소개합니다. 메인에 있는 "Personalize" 버튼을 클릭하시면 색상선택을 시작 하실 수 있습니다. 다양한 색상 50가지를 선택하실 수 있습니다. 50가지의 색상을 다 선택하시면 우측상단에 "Start Tranining" 버튼이 활성화되어 색상조합추천을 받으실 수 있습니다. 버튼을 누르면 선택한 50가지의 색상을 기준으로 AI가 분석을 시작하며 약 3~5분정도의 분석시간이 소요됩니다. 분석이 완료되면 다양한 샘플 조합이 화면에 출력됩니다. 좌측 상단 메뉴를 통해 문자, 이미지, 그라디언트 등 다양한 샘플예제들을 확인하실수 있습니다. 우측상단에 있는 설정을 누르시면 이미지 파일을 업로드하여 그이미지의 색상조합도 image메뉴에서 ..

색의 정보를 사전처럼 검색하고 얻을 수 있는 www.colorhexa.com 사이트입니다. 보색, 유사색은 물론 샘플로 배경이나 테두리 텍스트들의 정보도 미리 확인할 수 있습니다. 원하시는 색상코드를 RGB타입, HEX타입 CMYK 타입으로 입력 후 검색하시면 됩니다. 검색하시면, 유사색, 보색, 분할 색상, 해당 색상으로 다양한 부분의 미리보기 등을 제공합니다. 색상 결정에 어려움이 있는 경우 사용하시면 유용합니다.

webgradients는 180개의 그라디언트 샘플을 볼 수 있습니다. 맘에 드는 그라디언트를 발견하시면 png파일로 저장하시거나 css를 복사하여 사용할 수 있습니다. webgradients는 그라디언트 색상 조합을 위와 같이 썸네일 식으로 보여줍니다. 맘에 드는 그라디언트를 발견하시면 1번을 누르시면 png를 다운받으실 수 있습니다. 2번에서 색상코드를 알 수 있습니다. 3번에서 css를 복사하여 사용하실 수 있습니다. 색상이 2개 이상일 경우, 2번부분이 many color로 표시 되어있지만 css를 복사하면 색상코드를 보실 수 있습니다. ex) background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec..

이미지에서 알고싶은 색상을 원하실땐 해당 이미지를 업로드만 하면 적용된 주요색상을 자동으로 뽑아서 출력해주는 pictones 으로 간단하게 이미지의 색상을 확인할 수 있습니다. 사이트에 접속후 본문내용을 클릭하면 이미지를 업로드할 수 있는 툴이 열립니다. 이미지를 업로드하면.. (시간이 다소 소요됩니다.^^) 위 이미지를 토대로 6개의 컬러값을 출력하였습니다. 출력된 색상을 마우스오버하면 아래와 같이 컬러값을 확인할 수 있습니다. 웹사이트 혹은 코드컬러를 알고싶을때 상당히 유용할것으로 보이네요.^^

사이트에서 매우 중용한 색상 선택시 적합한 조합을 찾아 보여줍니다. 사이트 하단 좌측 새로고침 버튼을 클릭하면 색상조합이 변경됩니다. 저장하기 버튼을 클릭하면 현재의 색상표가 저장이 됩니다. 중앙버튼을 클릭하면 저장한 색상표들를 확인할 수 있습니다. 해당사이트는 특정 색상을 기반으로 하는 색조합이 필요할때는 별로 도움이 되지 않지만 임의의 색상 세트를 찾아야 할때 유용한 사이트 입니다.

브라우저를 사용할때 마우스로 드래그하면 기본적으로 나오는 파란색을 확인하실 수 있는데요. 이 기본 푸른색상을 CSS로 변경이 능합니다. selection 을 입력하여 원하는 색상으로 간편하게 변경하실 수 있습니다. ::selection { color:red; background:yellow; }