Color Techniques

Advanced Color Mixing for Pixel Grids

The Game-compatible 84 palette is limited, but strategic color placement can simulate gradients, shadows, and depth. These techniques help you get more visual range from fewer colors.

確認者 リビング・ザ・グリッド editor testing - 最終更新

グリッドメーカーを開く

このガイドでわかること

Advanced color mixing in pixel art uses dithering, color adjacency, and strategic palette choices to create the illusion of more colors than the palette actually provides. On トモダチライフ grids, this means working within 84 or 120 colors to achieve smooth transitions and readable shading.

手順

  1. Map your value range first. Before mixing colors, identify the darkest and lightest tones you need. Pick these anchors from the game palette, then find mid-tones that bridge the gap.
  2. Use checkerboard dithering for gradients. Alternate two colors in a checkerboard pattern to simulate a mid-tone. At game scale, the eye blends adjacent pixels into an intermediate shade.
  3. Group similar hues together. Place warm colors next to warm colors and cool next to cool. Abrupt hue jumps create visual noise instead of smooth transitions.
  4. Test at game scale. Dithering and mixing tricks look different when zoomed out. Always preview the result at the size it will appear in-game.

グリッド選択とトレードオフ

選択向いている用途トレードオフ
ゲーム84Clean flat designs with 2–4 color transitionsLimited mid-tones; dithering needed for smooth gradients.
拡張120色Designs requiring subtle shading and more hue varietyMore colors available but not all map perfectly to in-game rendering.

Understanding the Game Palette Constraints

The Game-compatible 84 palette was designed for clarity, not subtlety. Each color is spaced far enough apart to be distinguishable on a small screen, which means there are natural gaps between tones.

Your job as a color mixer is to bridge those gaps using placement rather than additional colors. Two well-chosen adjacent colors can suggest a third tone that does not exist in the palette.

Dithering Patterns That Work

Checkerboard dithering is the most reliable pattern at small grid sizes. Alternate two colors in a 1x1 grid to create a blended zone between solid areas.

Ordered dithering (2x2 blocks with graduated fill) works better on 48x48 grids where there is enough space for the pattern to read as a gradient rather than noise.

Creating Depth with Color Temperature

Warm colors advance and cool colors recede. Use warmer tones for foreground elements and cooler tones for backgrounds to create a sense of depth without extra detail.

A single warm highlight pixel on a cool surface can suggest a light source. Place it consistently across the design to maintain directional lighting.

Shadow and Highlight Placement

Pick a light direction and keep it consistent. Shadows should always fall on the same side of every element in the design.

Use the darkest available tone sparingly — only for the deepest shadows and strongest outlines. Too much dark creates a muddy, heavy look.

避けたいよくあるミス

  • Over-dithering small grids. On 32x32 or smaller, heavy dithering creates noise instead of smooth gradients. Use flat color blocks and reserve dithering for larger grids.
  • Mixing warm and cool randomly. Inconsistent color temperature makes the design look noisy. Group warm and cool tones intentionally.
  • Ignoring palette constraints. Designing with arbitrary colors and then converting to the game palette often produces unexpected shifts. Start from the game palette instead.

関連ガイド

よくある質問

How many colors should I use for shading?

For most designs, 2–3 shades per hue family is enough. More shades slow down copying without adding much visible detail at game scale.

Does dithering work on 32x32 grids?

Sparingly. Use it only in transition zones of 4+ cells wide. On smaller areas, flat colors look cleaner.

Should I design in the game palette or convert later?

Design directly in the game palette whenever possible. Converting from arbitrary colors introduces unexpected shifts and requires more cleanup.

キーボードショートカット

グリッドメーカーを開いた後に使えます。入力欄にフォーカスしている間は無効になります。

?このショートカットガイドを開く
P鉛筆ツール
F塗りつぶしツール
E消しゴムツール
I色を拾う
Mキャンバスを移動
+拡大
-縮小
Ctrl/CmdZ編集を元に戻す
Ctrl/CmdShiftZ編集をやり直す

Esc closes menus and dialogs.