단일 브랜드 색상을 자신만의 완전한 웹 색상 시스템으로 전환하십시오... 몇 분 안에!

기한이 있다는 이유만으로 앱의 기능에 집중해야 했기 때문에 앱의 UI를 몇 번이나 무시했습니까?

색상은 모든 UI의 중요한 기반을 형성합니다. 브랜드/아이덴티티 및 스타일을 일관되게 표현하고 의도와 의미를 효과적으로 전달할 수 있습니다.

그러나 적절한 색상 시스템을 구현하는 것은 여러분과 저 같은 개발자에게 상당히 어려울 수 있습니다. 특히 이 작업이 우리 앱의 실제 기능에 대한 작업과 씨름해야 하는 경우에는 더욱 그렇습니다.

웹 개발자의 경우 Simpler Color가 도움이 될 수 있습니다. 저는 이 작은 라이브러리를 작성하여 더 이상 다른 중요한 항목에 집중하면서 응집력 있고 전문적인 UI 색상 시스템을 희생하지 않아도 되도록 했습니다.

그리고 단일 브랜드 색상만 있으면 됩니다...

1-2-3처럼 쉬운

1단계: 간단한 색상 설치

npm install simpler-color

2단계: 브랜드 색상을 지정하면 나머지 기본 색상이 생성됩니다!

import { harmony } from 'simpler-color'

// Generate 5 harmonious base colors from your main brand color!
const baseColors = harmony('#609E3F')

(원하는 경우 또는 이미 브랜드 색상 세트가 있는 경우 사용자 지정 기본 색상을 정의할 수도 있습니다.)

3단계: UI 역할을 자동 생성된 팔레트의 특정 색상에 매핑하여 색 구성표 만들기

import { colorScheme } from 'simpler-color'

const scheme = colorScheme(
  baseColors, // 👈 From these base colors...
  // 👇 ...your color palettes are auto-generated
  colors => ({
    // 👇 which you then map to UI roles.
    primaryButton: colors.primary(40),
    primaryButtonText: colors.primary(95),
    surface: colors.neutral(98),
    text: colors.neutral(10),
    ...etc,
  }),
)
// Access various UI colors as `scheme.primaryButton` and so on.

다음은 예제 코드가 #609E3F의 단일 색상 값에서 생성하는 전체 색상 범위입니다.



그렇게 간단합니다! (또한 라이브러리는 훨씬 더 많은 작업을 수행할 수 있습니다.)

그러니 Simpler Color를 사용해 보세요. GitHub에서 확인하세요: https://github.com/arnelenero/simpler-color

Please don't forget to give it a star ⭐️ on GitHub if you like the library, its concept and the simplicity.

위에 사용된 일부 용어가 다소 낯설게 들리면 위 링크에 있는 포괄적인 README에서 자세한 내용을 확인하세요.

이 라이브러리가 유용하기를 바랍니다. 적절한 색상을 사용하면 초기 프로토타입이나 개념 증명 앱도 확실히 인상적일 것입니다!