カラーとCSSのツール。ブラウザの中で。
コピー&ペーストで使えるCSS・値・アセットを生成する、無料で軽量なユーティリティ。
Color Tools
- Color Palette GeneratorGenerate complementary, analogous, triadic, and more color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
- Color Format ConverterPaste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
- Contrast CheckerCheck foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
- Color MixerBlend two colors at any ratio in RGB or HSL space and copy the resulting hex, RGB, and HSL values instantly.
- Palette from ImageDrop in any image and extract its dominant colors with median-cut quantization. Export as CSS variables, Tailwind config, SCSS, or JSON.
- Colorblind SimulatorSee your palette through seven types of color vision deficiency. Spot pairs that collide for the ~8% of users with red/green confusion.
- Color Name LookupFind the closest CSS named color for any hex using perceptual Lab distance, or reverse lookup the exact hex behind any CSS keyword.
- Accessible Palette GeneratorBuild a tonal scale (50–950) from any brand color and see WCAG AA/AAA contrast ratings for every shade against white, black, and the rest of the scale.
CSS Generators
- Gradient GeneratorBuild linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
- Box Shadow GeneratorLayer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.
- Text Shadow GeneratorStack text-shadow layers for drop shadows, neon glows, 3D type, letterpress, and long shadows. Preview on live text and copy the CSS.
- CSS Filter GeneratorLayer blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia into a single CSS filter with live preview on image or text.
- Cubic Bezier Easing VisualizerDrag the two control points to design custom cubic-bezier() easing curves. Compare against ease, ease-in, ease-out, and watch the timing curve drive a live animation.
- Border Radius PreviewerFine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
- Clip-Path MakerDraw custom clip-path polygons with an interactive editor, or start from presets like triangles, hexagons, and arrows.
すべてのツールはブラウザ上で動作します — ファイルがアップロードされることはありません。