เครื่องมือออกแบบ
เครื่องมือช่วยงานออกแบบภาพและงาน front-end ที่ใช้งานได้รวดเร็ว พร้อม CSS ที่คัดลอกไปใช้ได้ทันที และการตรวจสอบการเข้าถึงตามสูตรคอนทราสต์ของ WCAG
7 เครื่องมือ
เครื่องมือในหมวดหมู่นี้
- ตัวแปลงสีแปลงสีระหว่าง HEX, RGB, HSL, HWB, OKLCH และ CMYK แบบสูตรพื้นฐาน วางค่าสี CSS หรือใช้ตัวเลือกสี แล้วคัดลอกแต่ละรูปแบบได้ ใช้งานในเบราว์เซอร์
- ตรวจสอบคอนทราสต์สีตรวจสอบอัตราส่วนคอนทราสต์ของข้อความและพื้นหลังตาม WCAG 2.2 ดูผล AA และ AAA สำหรับข้อความและส่วนประกอบ UI พร้อมรับค่าสีที่ใกล้เคียงที่สุดซึ่งผ่านเกณฑ์
- ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบ linear, radial และ conic ด้วยจุดหยุดสี 2 ถึง 6 จุด กำหนดมุมและตำแหน่ง ดูตัวอย่างแบบเรียลไทม์ แล้วคัดลอก CSS สำหรับ background
- เครื่องมือสร้าง Box Shadowออกแบบ CSS box-shadow แบบหลายชั้น ปรับระยะเยื้อง เบลอ ขยาย สี ความทึบ และ inset ดูตัวอย่างบนพื้นหลังใดก็ได้ แล้วคัดลอก CSS box-shadow
- เครื่องมือสร้างชุดสีสร้างชุดสีคู่ตรงข้าม สีใกล้เคียง สามสี สี่สี คู่ตรงข้ามแบบแยก และชุดเฉดสีจากสีเดียว ล็อกสี แล้วคัดลอกเป็น HEX, CSS หรือ JSON
- ตัวแปลง PX เป็น REMแปลง px เป็น rem หรือ em และย้อนกลับด้วยขนาดฟอนต์ root ใดก็ได้ (ค่าเริ่มต้น 16px) มีตารางขนาดที่ใช้บ่อยและแปลงค่า px ในโค้ด CSS ทั้งชุด
- เครื่องคำนวณอัตราส่วนภาพคำนวณความกว้างหรือความสูงที่ขาดไปตามอัตราส่วนใดก็ได้ ย่อขนาดอย่าง 1920×1080 เป็น 16:9 ดูตัวอย่างสัดส่วน และคัดลอกกฎ CSS aspect-ratio