셰이더 아틀라스
EN
◐ 그라디언트·배경

색상환 그라디언트

Color Wheel

무지개 스펙트럼이나 선택한 세 색이 한 방향으로 이어지는 그라디언트입니다.

다른 이름: ColorWheelRainbow gradient

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, ColorWheel } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ColorWheel />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, ColorWheel } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ColorWheel/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, ColorWheel } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ColorWheel />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, ColorWheel } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ColorWheel />
    </Shader>
  )
}
JavaScript
// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ColorWheel',
    }
  ]
}, { disableTelemetry: true })

속성(props) · ColorWheel

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름값기본값범위·선택지설명(원문)
modeModerainbowrainbow · customRainbow cycles through the full spectrum; Custom loops through your three chosen colors
colorAColor 1#ff0000—First color in the cycle
colorBColor 2#00ff88—Second color in the cycle
colorCColor 3#0066ff—Third color in the cycle
scaleScale10.1 – 10 (step 0.1)Number of color cycles across the viewport
angleAngle0-180 – 180 (step 1)Direction the gradient flows
speedSpeed0.05-1 – 1 (step 0.01)Speed at which the gradient cycles
colorSpaceColor Spaceoklchlinear · oklch · oklab · hsl · hsv · lchColor space for blending between custom colors

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

원뿔형 그라디언트Conic Gradient

중심점을 둘러 색이 한 바퀴 이어지며, 색상환처럼 보이는 각도형 그라디언트입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

색조 이동Hue Shift

이미지의 색을 색상환을 따라 다른 색으로 이동시킵니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

그라디언트 맵Gradient Map

입력의 어두움부터 밝음까지를 색상 그라디언트에 대응시켜 전체 색조를 바꿉니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

단색 배경Solid Color

선택한 한 가지 색으로 캔버스를 채우는 단색 레이어입니다.

색상환을 길게 펼쳐 놓은 띠처럼, 한 방향으로 여러 색이 이어지고 천천히 순환합니다. 색 자체가 주인공인 배경이나 장식에 잘 맞습니다.

`mode`를 rainbow로 두면 전체 무지개를, custom으로 두면 선택한 세 색을 순환합니다. `angle`을 바꾸면 색이 흐르는 방향이 회전하고(기본 0°, 범위 -180–180°), `scale`을 올리면 화면 안에 반복되는 색 주기가 늘어납니다(기본 1, 범위 0.1–10). `speed`는 순환 속도를 정합니다(기본 0.05, 범위 -1–1).

이 생성 레이어는 캔버스를 직접 채우므로 입력이 필요하지 않습니다. 색이 많이 바뀌는 영역 뒤에 작은 글씨를 두면 읽기 어려울 수 있어, 텍스트를 얹을 때는 단색에 가까운 구역을 확보하세요. 강한 색 띠는 장식 요소를 추가하기 전에 충분히 시선을 끄는지 확인합니다.

언제 쓰나

무지개색이나 사용자 지정 색 조합을 넓게 보여줄 때, 색이 흐르는 장식 배경을 만들 때, 색상환을 펼친 듯한 시각 자료가 필요할 때 좋습니다. 텍스트의 대비가 중요한 좁은 영역에는 피하세요.

페이지로 열기 ↗