ฉันรู้ว่าคุณสามารถเขียน ...

background-color: #ff0000;

... ถ้าคุณต้องการบางอย่างที่เป็นสีแดง

และคุณสามารถเขียน ...

background-color: rgba(255, 0, 0, 0.5);

... ถ้าคุณต้องการบางอย่างสีแดงและโปร่งแสง

มีวิธีสั้น ๆ ของการเขียนสีโปร่งใสบางส่วนในเลขฐานสิบหก? ฉันต้องการสิ่งที่ชอบ

background-color: #ff000088; <--- the 88 is the alpha

... หรือ ...

background-color: #ff0000 50%;

ฉันได้สีทั้งหมดของฉันเป็นเลขฐานสิบหกและต้องแปลงมันทั้งหมดให้เป็นสเกลเลขฐานสิบ 0-255 นั้นน่ารำคาญ

CSS Color Module Level 4 อาจรองรับรูปแบบเลขฐานสิบหก RGBA 4 และ 8 หลัก!

สามสัปดาห์ที่ผ่านมา (วันที่ 18 ธันวาคม 2014) ร่างแบบแก้ไข CSS โมดูลสีระดับ 4ถูกส่งไปยังคณะทำงาน CSS W3C แม้ว่าในรัฐซึ่งเป็นอย่างยิ่งไวต่อการเปลี่ยนแปลงรุ่นปัจจุบันของเอกสารที่แสดงให้เห็นว่าในบ้างในอนาคตอันใกล้จะ CSS สนับสนุนทั้ง 4 และ 8 หลักเลขฐานสิบหก RGBA

หมายเหตุ: ข้อความต่อไปนี้มีเนื้อหาที่ไม่เกี่ยวข้องถูกตัดออกและแหล่งที่มาอาจได้รับการแก้ไขอย่างมากในเวลาที่คุณอ่าน (ตามที่กล่าวถึงข้างต้นเป็นร่างของบรรณาธิการและไม่ใช่เอกสารสรุป)
หากสิ่งมีการเปลี่ยนแปลงอย่างมากโปรดออกความคิดเห็นแจ้งให้ฉันทราบเพื่อให้ฉันสามารถอัปเดตคำตอบนี้!

§ 4.2 สัญลักษณ์เลขฐานสิบหก RGB: #RRGGBB

ไวยากรณ์ของ<hex-color>เป็น<hash-token>โทเค็นที่มีค่าประกอบด้วย 3, 4, 6 หรือ 8 หลักเลขฐานสิบหก กล่าวอีกนัยหนึ่งสีฐานสิบหกเขียนเป็นอักขระแฮช "#" ตามด้วยตัวเลข0-9หรือตัวอักษรจำนวนหนึ่งa-f(กรณีของตัวอักษรไม่สำคัญ - #00ff00เหมือนกัน#00FF00)

8 หลัก

ตัวเลข 6 ตัวแรกถูกตีความเหมือนกันกับเครื่องหมาย 6 หลัก คู่สุดท้ายของตัวเลขซึ่งตีความว่าเป็นเลขฐานสิบหกจะระบุช่องสัญญาณอัลฟาของสีโดยที่จะ00แสดงถึงสีที่โปร่งใสอย่างสมบูรณ์และffแสดงถึงสีทึบทั้งหมด

ตัวอย่างที่ 3
กล่าวอีกนัยหนึ่ง#0000ffccหมายถึงสีเดียวกันกับrgba(0, 0, 100%, 80%)(สีน้ำเงินโปร่งใสเล็กน้อย)

4 หลัก

นี่เป็นตัวแปรที่สั้นกว่าของสัญกรณ์ 8 หลัก "ขยาย" ในลักษณะเดียวกับสัญกรณ์ 3 หลัก ตัวเลขแรกที่ตีความว่าเป็นเลขฐานสิบหกระบุช่องสีแดงของสีโดยที่0แสดงถึงค่าต่ำสุดและfแสดงถึงจำนวนสูงสุด ตัวเลขสามหลักถัดไปแสดงถึงช่องสีเขียวสีน้ำเงินและอัลฟาตามลำดับ

สิ่งนี้หมายความว่าสำหรับอนาคตของสี CSS?

ซึ่งหมายความว่าสมมติว่าสิ่งนี้ไม่ได้ถูกลบออกอย่างสมบูรณ์จากเอกสารระดับ 4 เราจะสามารถกำหนดสี RGBA ของเรา (หรือสี HSLA หากคุณเป็นหนึ่งในนั้น ) ในรูปแบบเลขฐานสิบหกในเบราว์เซอร์ที่รองรับสี ไวยากรณ์ของโมดูลระดับ 4

ตัวอย่าง

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

ฉันจะสามารถใช้ผลิตภัณฑ์นี้กับผลิตภัณฑ์ที่ลูกค้าต้องเผชิญได้เมื่อใด

เรื่องตลกทั้งหมด:ขณะนี้เป็นเพียงการเริ่มต้นของปี 2015 ดังนั้นสิ่งเหล่านี้จะไม่ได้รับการสนับสนุนในเบราว์เซอร์ใด ๆ มาระยะหนึ่งแล้ว - แม้ว่าผลิตภัณฑ์ของคุณจะได้รับการออกแบบมาให้ทำงานกับเบราว์เซอร์รุ่นล่าสุดเท่านั้น ไม่เห็นการดำเนินการนี้ในเบราว์เซอร์ที่ใช้งานจริงเร็ว ๆ นี้

ดูการสนับสนุนเบราว์เซอร์ปัจจุบันสำหรับสัญกรณ์สี #RRGBGBBAA

อย่างไรก็ตามที่กล่าวว่าวิธีการทำงานของ CSS หมายความว่าเราสามารถเริ่มใช้สิ่งเหล่านี้ได้ในวันนี้! หากคุณต้องการเริ่มใช้งานจริง ๆ ในตอนนี้ตราบใดที่คุณเพิ่มเบราว์เซอร์ที่ไม่รองรับก็จะไม่สนใจคุณสมบัติใหม่จนกว่าพวกเขาจะถือว่าถูกต้อง:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

<figure>Hello, world!</figure>

ตราบใดที่คุณกำลังดูคำตอบนี้บนเบราว์เซอร์ที่สนับสนุนbackgroundและcolorคุณสมบัติใน CSS <figure>องค์ประกอบที่เป็นผลมาจากตัวอย่างข้างต้นจะมีลักษณะคล้ายกับนี้:

การใช้ Chrome เวอร์ชันล่าสุดบน Windows (v39.0.2171) เพื่อตรวจสอบ<figure>องค์ประกอบของเราเราจะเห็นสิ่งต่อไปนี้:

การถอยกลับเลขฐานสิบหก 6 หลักจะถูกแทนที่ด้วยrgba()ค่าและค่าเลขฐานสิบหก 8 หลักของเราจะถูกละเว้นเนื่องจากในขณะนี้ค่าตัวแยกวิเคราะห์ CSS ของ Chrome นั้นไม่ถูกต้อง ทันทีที่เบราว์เซอร์ของเรารองรับค่า 8 หลักเหล่านี้จะแทนที่ค่าเหล่าrgba()นั้น

อัปเดต 2018-07-04: Firefox, Chrome และ Safari ได้รับการสนับสนุนในขณะนี้ Edge ยังคงหายไป แต่อาจจะติดตาม ( https://caniuse.com/#feat=css-rrggbbaa )

ฉันพบคำตอบหลังจากโพสต์การปรับปรุงในคำถาม ขออภัย!

MS Excel ช่วยด้วย!

เพียงเพิ่มคำนำหน้า Hex ไปยังค่าสีฐานสิบหกเพื่อเพิ่มอัลฟ่าที่มีความทึบเทียบเท่ากับค่า%

(ใน rbga เปอร์เซ็นต์ความทึบจะแสดงเป็นทศนิยมตามที่กล่าวไว้ข้างต้น)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

ดูที่นี่http://www.w3.org/TR/css3-color/#rgba-color

ไม่สามารถทำได้อาจเป็นเพราะ 0xFFFFFFFF มากกว่าค่าสูงสุดสำหรับจำนวนเต็ม 32 บิต

Chrome 52+ รองรับ alpha hex:

background: #56ff0077;

การใช้งานred, green, blueแปลง RGBA:

background-color: rgba(red($color), green($color), blue($color), 0.2);

ฉันกลัวว่าเป็นไปไม่ได้ rgbaรูปแบบที่คุณรู้ว่าเป็นเพียงคนเดียว

หากคุณสามารถใช้ LESS ได้จะมีฟังก์ชั่นจาง

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

เจ้าชายที่มีเสน่ห์:

Internet explorer เท่านั้นที่อนุญาตให้มีสีฐานสิบหกไบต์ในรูปแบบของ ARGB โดยที่ A คือช่องอัลฟ่า มันสามารถใช้ในตัวกรองไล่ระดับสีเช่น:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

โดยที่ dir สามารถเป็น: 1 (แนวนอน) หรือ 0 (แนวตั้ง) และสตริงสีสามารถเป็นสีฐานสิบหก (# FFAAD3) หรือสีฐานสิบหก (# 88FFAAD3)

ใน Sass เราสามารถเขียน:

background-color: rgba(#ff0000, 0.5);

ตามที่แนะนำในการแสดง Hex ของสีด้วยอัลฟาแชนเนล?

สัญลักษณ์สีต่างกันคือสิ่งที่คุณจะต้องเรียนรู้
Kulerช่วยให้คุณมีโอกาสที่ดีขึ้นในการค้นหาสีและในหลาย ๆ สัญลักษณ์
Hex ไม่แตกต่างจาก RGB, FF = 255 และ 00 = 0 แต่นั่นคือสิ่งที่คุณรู้ ดังนั้นในทางหนึ่งคุณจะต้องเห็นภาพ
ฉันใช้ Hex, RGBA และ RGB การแปลงด้วยตนเองจะช่วยให้คุณจำสีและรหัสของมันได้ 100 สี
สำหรับการแปลงมวลเขียนสคริปต์เช่นเดียวกับที่ได้รับโดย Alarie มีการระเบิดด้วยสี

ทำไมไม่ใช้ background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

หากคุณกำหนดเป้าหมายสีสำหรับข้อความหรือองค์ประกอบอาจจะทำได้ง่ายกว่ามาก