← กลับไปยังคุณสมบัติ
Free

จานสี

สแกนทุกองค์ประกอบและดึงชุดสีเรียงตามความถี่

ดึงพาเลทสีอัตโนมัติจากทุกคุณสมบัติสี

ตัวอย่างสด
example.com
Extracted Palette — 8 colors Export All
#7c3aed
42 uses
#0f0f1a
38 uses
#e8e8f0
31 uses
#4ade80
14 uses
#1a1a2e
28 uses
#ef4444
6 uses
#f59e0b
5 uses
#3b82f6
4 uses
คุณสมบัติหลัก

ดึงอัตโนมัติ

Scans ทุก visible element บนหน้า and extracts colors from computed properties: color, background-color, border-color, box-shadow color, outline-color, and text-decoration-color. ทุก color used บนหน้า is captured.

เรียงตามความถี่

Colors are sorted by usage count — the most-used color appears first. Dominant brand colors and backgrounds rise to the top, while one-off accent colors appear last. Instantly see หน้า's primary, secondary, and accent colors.

ตัวอย่างสี

แต่ละ color is rendered as a large visual swatch with its HEX code and usage count displayed below. The swatches are large enough to distinguish subtle shade differences (like #333 vs #2a2a2a).

คัดลอกคลิกเดียว

Click ใดก็ได้ color swatch to copy its HEX value to คลิปบอร์ดของคุณ immediately. No need to open a color panel or secondary dialog — one click, copied, done.

ส่งออกพาเลท

Click "Export All" to copy the entire palette as a formatted list of HEX color codes. Paste into a design tool, CSS variables file, or color documentation. The list preserves the frequency sort order.

ไม่ซ้ำ

Colors are normalized (rgb and hex representations of the same color are merged) and de-duplicated. The palette shows unique colors only, with combined usage counts for duplicate representations.

กรณีการใช้งานทั่วไป

แรงบันดาลใจ

Visit websites with beautiful color schemes and extract their exact palette. Use the colors as a starting point for your own design — or simply document which color combinations work well together.

ตรวจแบรนด์

Run Color Palette on your own site to verify brand color consistency. Are there 4 slightly different blues where there should be 1? Are off-brand colors creeping in? The frequency sort makes inconsistencies obvious.

CSS Variables

Export the palette and convert it into CSS custom properties (--color-primary, --color-secondary, etc.). The frequency-sorted output tells you which colors deserve primary, secondary, and accent roles.

วิเคราะห์คู่แข่ง

Extract color palettes from competitor websites to understand their brand positioning. Warm colors vs cool colors, high contrast vs muted — the palette reveals intentional design choices.

การเข้าถึงสี

See all text colors alongside background colors. Are ใดก็ได้ text-background combinations too low contrast? The palette gives you the full set of colors เพื่อตรวจสอบ against WCAG contrast requirements.

วิธีใช้งาน
1

เปิดใช้งาน

เปิด DevSuite Pro dock ลอย and click the Color Palette icon. The tool scans ทุก element บนหน้า and extracts all color values.

2

ดูสี

A grid of color swatches appears, sorted by usage frequency. The most-used colors are at the top. แต่ละ swatch shows the HEX code and number of elements using that color.

3

คัดลอก

Click ใดก็ได้ swatch to copy its HEX value to คลิปบอร์ดของคุณ. A brief confirmation appears.

4

ส่งออก

Click "Export All" to copy ทุก color as a formatted list. Paste into your CSS variables file, design tool, or documentation.

5

เปรียบเทียบหน้า

Navigate to different pages on the same site and extract palettes to verify color consistency across the site.

พร้อมที่จะลองหรือยัง? จานสี?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox