2012-06-14 1 views
2

나는 웹 사이트를 만들고 있으며 CSS를 구성하기 위해 SASS/Compass를 사용하면서 철저히 즐겁게 지내면서 웹 사이트를 만들 수있는 아이디어를 얻었습니다.단일 입력 색상을 기반으로 한 유사 색 구성표를 생성하는 alghoritm이란 무엇입니까?

처음에는 테마 팔레트의 색상을 나타내는 8 가지 변수 집합을 간단히 생각했습니다. 다음으로 모든 CSS 규칙은 그 색상을 사용하거나 밝게/어둡게 만든 버전을 사용합니다 (그림자, 오버레이, 그래디언트 및 광선).

그런 다음 하나의 테마 기본 색상을 갖는 미친 생각에 이르렀습니다. 그 후에 나머지 팔레트가 계산됩니다. 예를 들어,이 도구에

enter image description here

난에서, (오른쪽 참조) 그 다음에 기초한 완전 컬러 팔레트를 생성 한 후, 단일 기본 색 (원의 내측에서 녹색), 촬상 이 경우 그것은 "아날로그"색 구성표입니다.

제 질문은 SASS에서이 도구로 사용하는 alghoritm을 복제 할 수 있기 때문에 SASS가 나머지 색 구성표를 계산하는 동안 구성 가능한 단일 색을 가질 수 있습니다.

여러분 중 일부는이 운동의 유용성을 의심 할 수도 있지만 재미있는 실험으로 생각합니다.

+0

전혀 좋지 않다고 생각합니다. 실제로, 실제로 이것을하는 웹 사이트의 수를 고려할 때 분명히 다른 사람들도 그렇게 생각합니다. 해결해야 할 것은 표준 색상 수식을 사용하는 것입니다. SASS가 변수를 제공하기 때문에 스크립트에서 스크립트를 구동하는 것은 간단합니다. 수식을 선택하지 않을 수도 있습니다;) –

+0

이 질문에 대한 답변을 찾고있는 귀하 또는 다른 누구에게나 : [SASS 용이 색상 체계] (https://github.com/Team-Sass/color-schemer)를 참조하십시오. – JPollock

답변

2

한 가지만 색 휠이 잘못되었습니다. 빨간색의 보색은 녹색이 아닌 시안 색입니다. 또한 올바른 용어는 '유추'가 아니라 '유추'입니다. 나는 개인적으로 this website가 더 낫다고 생각한다.

기본 유사 색 구성표를 만들려면 먼저 색상을 HSL (또는 유사한 색조 기반) 형식으로 변환하는 방법이 필요합니다. 가정이 있고, 유사한 3 색 구성표의 기본 알고리즘은 다음과 같습니다

Inputs: BaseColor, HueVariation 

Color1 = BaseColor 
Color2 = ColorFromHSL(Hue(BaseColor) + HueVariation, Saturation(BaseColor), Lightness(BaseColor)) 
Color3 = ColorFromHSL(Hue(BaseColor) - HueVariation, Saturation(BaseColor), Lightness(BaseColor)) 

Wikipedia 더 많은 정보가 있습니다.

1

당신이 찾고있는 것은 색 조화입니다. 이러한 하모니를 생성하는 데 도움이되는 미리 정의 된 체계가 많이 있습니다. 일반적으로 RGB 색상 공간이 아닌 HSL 색상 공간을 기반으로합니다.

http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm

http://sputnik.freewisdom.org/lib/colors/

또한 싶어 다른 계획에 대한 구글에서 검색하는 것을 시도 할 수 있습니다 :

다음은 사용할 수있는 링크입니다.

대부분의 경우 스키마는 주어진 입력 색상과 관계없이 작동하므로 한 색상에 대한 맞춤 구성표를 만들어 다른 색상 세트에 적용 할 수 있습니다.

+0

감사. 네, 실제로 색의 하모니를 찾고 있습니다. 그러나 질문은 단일 입력 색상에서 하나를 계산하는 방법입니다. – Ferdy

+0

새로운 링크를 추가했습니다. 시작하기에 충분한 정보가 있다고 생각합니다. :) –

관련 문제